javascript 页面划词搜索JS

 更新时间:2009年09月28日 20:33:41   作者:  
这个脚本是网上的代码修改的,兼容各主流浏览器,优化页面异步加载的文字的检索提示框定位,根据选择文字位置与屏幕尺寸计算检索提示框定位。
基于Jquery修改,以下为全部脚本
复制代码 代码如下:

//划词搜索
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);
});

附上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;}

相关文章

  • js修改元素样式的九种方式总结

    js修改元素样式的九种方式总结

    用惯了vue和react之后可能会慢慢淡忘掉原生的一些操作dom的几种方式,有的时候确实需要我们通过原生的方式进行操作,下面这篇文章主要给大家介绍了关于js修改元素样式的九种方式,需要的朋友可以参考下
    2024-04-04
  • BootStrop前端框架入门教程详解

    BootStrop前端框架入门教程详解

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。这篇文章主要介绍了BootStrop前端框架入门教程详,需要的朋友可以参考下
    2016-12-12
  • 原生js实现返回顶部缓冲效果

    原生js实现返回顶部缓冲效果

    本文主要分享了原生js实现返回顶部缓冲效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 详解js的事件处理函数和动态创建html标记方法

    详解js的事件处理函数和动态创建html标记方法

    本文主要对javascript的事件处理函数,动态创建html标记的两种方法进行详细介绍,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • js+html5获取用户地理位置信息并在Google地图上显示的方法

    js+html5获取用户地理位置信息并在Google地图上显示的方法

    这篇文章主要介绍了js+html5获取用户地理位置信息并在Google地图上显示的方法,涉及html5元素的操作技巧,需要的朋友可以参考下
    2015-06-06
  • JavaScript中的Error错误对象与自定义错误类型详解

    JavaScript中的Error错误对象与自定义错误类型详解

    Error是JavaScript中最原始的错误对象,作为各种异常的基础对象,还有多个衍生的具体的错误类型,这些错误对象类型在nodejs中也可应用,这篇文章主要介绍了JavaScript中的Error错误对象与自定义错误类型,需要的朋友可以参考下
    2022-12-12
  • 浅谈js的html元素的父节点,子节点

    浅谈js的html元素的父节点,子节点

    下面小编就为大家带来一篇浅谈js的html元素的父节点,子节点。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • javascript实现unicode与ASCII相互转换的方法

    javascript实现unicode与ASCII相互转换的方法

    这篇文章主要介绍了javascript实现unicode与ASCII相互转换的方法,涉及JavaScript字符串的遍历、正则匹配及编码转换相关技巧,需要的朋友可以参考下
    2015-12-12
  • 详解json串反转义(消除反斜杠)

    详解json串反转义(消除反斜杠)

    这篇文章主要介绍了详解json串反转义(消除反斜杠),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • WebGL学习教程之Three.js学习笔记(第一篇)

    WebGL学习教程之Three.js学习笔记(第一篇)

    Three.js是一个js的开源框架,它把webgl的所有东西都封装好了,我们不再需要去了解webgl那些比较麻烦的细节,直接在此框架上进行开发,既方便,又快捷,而且很容易就能学习,感兴趣的朋友跟随小编一起看看吧
    2019-04-04

最新评论