第一次在博客园发文,也是第一次用Live Writer发文,更是第一次测试下帖代码的效果。废话了一大堆,不知道最后效果怎么样。
先说明下,这个脚本是网上的代码修改的,兼容各主流浏览器,优化页面异步加载的文字的检索提示框定位,根据选择文字位置与屏幕尺寸计算检索提示框定位。
基于Jquery修改,以下为全部脚本
</>code
- //划词搜索
- var GLS = {};
- GLS.startObj = null;
- GLS.isdb = false;
- GLS.allow = true;
- GLS.isallow = function() {
- if (GLS.allow) {
- GLS.allow = false;
- alert('Google搜索已关闭');
- }
- else {
- GLS.allow = true;
- alert('Google搜索已打开');
- }
- };
- GLS.dblclick = function() {
- GLS.isdb = true;
- };
- GLS.mousedown = function(evt) {
- evt = (evt) ? evt : ((window.event) ? window.event : "");
- if (evt) {
- GLS.startObj = (evt.target) ? evt.target : evt.srcElement;
- }
- };
- GLS.mouseup = function(evt) {
- var obj;
- var strlen;
- evt = (evt) ? evt : ((window.event) ? window.event : "");
- if (evt) {
- obj = (evt.target) ? evt.target : evt.srcElement;
- strlen = window.getSelection ? window.getSelection().toString() : document.selection.createRange().text;
- }
- var str = "";
- if (obj.tagName != "A" && obj.tagName != "INPUT" && obj == GLS.startObj && !GLS.isdb && GLS.allow) {
- if (strlen.length > 0) {
- str = strlen;
- }
- }
- GLS.search(str, evt);
- GLS.isdb = false;
- };
- GLS.search = function(str, evt) {
- var obj = $("#GLSearch");
- var sDivWidth = 88; //检索框“Google搜索”的宽度
- if (str.toString().length > 0) {
- var windowWidth; //窗口的宽
- //取得窗口的宽
- if (self.innerWidth) {
- windowWidth = self.innerWidth;
- } else if (document.documentElement && document.documentElement.clientWidth) {
- windowWidth = document.documentElement.clientWidth;
- } else if (document.body) {
- windowWidth = document.body.clientWidth;
- }
- obj.css({ 'display': 'block', 'position': 'absolute', 'zindex': '10000' });
- var rX, rX, wT;
- if ($.browser.msie) {
- wT = (evt.clientX + sDivWidth) - windowWidth;
- rY = document.documentElement.scrollTop + evt.clientY;
- rX = document.documentElement.scrollLeft + evt.clientX;
- rY = (evt.clientY < 25) ? rY + 5 : rY - 25;
- rX = (wT > 0) ? rX - wT : rX + 5;
- }
- else {
- var sT = (document.documentElement.scrollTop > 0) ? document.documentElement.scrollTop : document.body.scrollTop;
- wT = (evt.pageX + sDivWidth) - windowWidth;
- rY = ((evt.pageY - sT) < 25) ? evt.pageY + 5 : evt.pageY - 25;
- rX = (wT > 0) ? evt.pageX - wT : evt.pageX + 5;
- }
- obj.css("top", rY);
- obj.css("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>");
- }
- else {
- obj.css("display", "none");
- }
- };
- //页面加载
- $(document).ready(function() {
- $(document.body).append("<div id='GLSearch'></div>");
- $(document).mousedown(GLS.mousedown).dblclick(GLS.dblclick).mouseup(GLS.mouseup);
- });
</>code
- ------------
</>code
- 附上CSS
</>code
- /*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;}
</>code
- ----------
</>code
- search.gif图片
其实这篇文章就是测试下是否发文成功:) Tag标签: 划词,划词检索,javascript</>code
![]()
如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛