基于jQuery的网页划词搜索功能实现

jQuery划词搜索功能概述

该功能基于jQuery库进行修改，以下是完整的脚本代码。

 
// 划词搜索功能模块
定义全局对象 GLS。
GLS.startObj 初始值为 null，用于记录鼠标按下时的元素。
GLS.isdb 初始值为 false，用于标识是否双击。
GLS.allow 初始值为 true，用于控制搜索功能开关。
GLS.isallow 函数用于切换搜索功能的启用状态。
如果 GLS.allow 为真：
将 GLS.allow 设为 false，
弹出提示“Google搜索已关闭”，
} 
否则：
将 GLS.allow 设为 true，
弹出提示“Google搜索已打开”，
} 
}; 
GLS.dblclick 函数处理双击事件。
将 GLS.isdb 设为 true，表示检测到双击。
}; 
GLS.mousedown 函数处理鼠标按下事件，参数为 evt。
兼容不同浏览器的事件对象获取：evt = (evt) ? evt : ((window.event) ? window.event : "");
如果 evt 存在：
获取目标元素：GLS.startObj = (evt.target) ? evt.target : evt.srcElement;
} 
}; 
GLS.mouseup 函数处理鼠标抬起事件，参数为 evt。
声明局部变量 obj。
声明局部变量 strlen。
兼容不同浏览器的事件对象获取：evt = (evt) ? evt : ((window.event) ? window.event : "");
如果 evt 存在：
获取目标元素：obj = (evt.target) ? evt.target : evt.srcElement;
获取选中字符串长度：strlen = window.getSelection ? window.getSelection().toString() : document.selection.createRange().text;
} 
声明局部变量 str 并初始化为空字符串。
如果目标元素标签不是 A 且不是 INPUT，且 obj 等于 GLS.startObj，且未检测到双击，且搜索功能允许：
如果选中字符串长度大于 0：
将选中字符串赋值给 str。
} 
} 
调用 GLS.search 函数，传入 str 和 evt。
将 GLS.isdb 重置为 false。
}; 
GLS.search 函数用于执行搜索逻辑，参数为 str 和 evt。
获取 ID 为 GLSearch 的元素对象。
定义检索框宽度 sDivWidth 为 88，对应“Google搜索”文本宽度。
如果 str 转换为字符串后长度大于 0：
声明局部变量 windowWidth，表示窗口宽度。
获取窗口宽度。
如果 self.innerWidth 存在：
windowWidth = self.innerWidth;
否则如果 document.documentElement 且 document.documentElement.clientWidth 存在：
windowWidth = document.documentElement.clientWidth;
否则如果 document.body 存在：
windowWidth = document.body.clientWidth;
} 
设置 obj 的 CSS 属性：display 为 block，position 为 absolute，zindex 为 10000。
声明局部变量 rX, rX, wT。
如果浏览器为 IE ($.browser.msie)：
计算 wT = (evt.clientX + sDivWidth) - windowWidth;
计算 rY = document.documentElement.scrollTop + evt.clientY;
计算 rX = document.documentElement.scrollLeft + evt.clientX;
如果 evt.clientY 小于 25，则 rY = rY + 5，否则 rY = rY - 25。
如果 wT 大于 0，则 rX = rX - wT，否则 rX = rX + 5。
} 
否则（非IE浏览器）：
计算 sT = (document.documentElement.scrollTop > 0) ? document.documentElement.scrollTop : document.body.scrollTop;
计算 wT = (evt.pageX + sDivWidth) - windowWidth;
如果 ((evt.pageY - sT) 小于 25)，则 rY = evt.pageY + 5，否则 rY = evt.pageY - 25。
如果 wT 大于 0，则 rX = evt.pageX - wT，否则 rX = evt.pageX + 5。
} 
设置 obj 的 top 属性为 rY。
设置 obj 的 left 属性为 rX。
设置 obj 的 HTML 内容为：<a class='GL_s' target='_blank' href='http://www.google.com/search?ie=UTF-8&oe=UTF-8&q=' + encodeURIComponent(str) + '>Google搜索</a>。
} 
否则：
设置 obj 的 display 属性为 none。
} 
}; 
// 页面加载初始化
$(document).ready(function() {
在 document.body 中追加 <div id='GLSearch'></div>。
为 document 绑定 mousedown、dblclick 和 mouseup 事件，分别对应 GLS.mousedown、GLS.dblclick 和 GLS.mouseup。
}); 

CSS样式定义

附上CSS/*search*/样式代码

 
a.GL_s{width:68px;height:20px;display:block;border:solid 1px #2b7ab7;line-height:20px;padding-left:18px;color:#084f10;font-size:12px;font-weight:bold;background:url(search.gif) no-repeat left;text-decoration:none;}
a.GL_s:link{filter:alpha(opacity=71);-moz-opacity:0.7;opacity: 0.7;}
a.GL_s:hover{filter:alpha(opacity=100);-moz-opacity:1.0;opacity: 1.0;}