javascript 页面划词搜索JS_javascript技巧

基于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;}

时间: 2024-06-12 15:56:00

javascript 页面划词搜索JS_javascript技巧的相关文章

基于jquery的页面划词搜索JS_jquery

基于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

基于jquery的划词搜索实现(备忘)_jquery

参照页面:http://www.jb51.net/article/24825.htm 一.DragSearchByJQuery.aspx页面(调用页面) 复制代码 代码如下: <head runat="server"> <title>划词搜索</title> <style type="text/css"> /*search*/ a.GL_s{width:68px;height:20px;display:block;bo

qq浏览器自动划词搜索开启方法怎么设置

  浏览器自动划词搜索开启方法有很多,如果没有开启这个功能,用户也可以通过右键选中选项,在右键菜单总就会有使用搜索引擎来搜索的选项,如果想在自动划词搜索时使用百度浏览器,还需要对其进行一些相关设置,一起看看吧. qq浏览器自动划词搜索怎么开启 1.打开电脑管家,点击右上角的主菜单按钮; 2.在其中点击选择"设置中心"; 3.点击左侧的"上网安全",勾选"开启浏览器划词搜索功能",点击应用即可完成设置. qq浏览器自动划词搜索设置为百度方法 建议打

qq浏览器自动划词搜索怎么开启

  1.打开电脑管家,点击右上角的主菜单按钮. 2.在其中点击选择"设置中心". 3.点击左侧的"上网安全",勾选"开启浏览器划词搜索功能",点击应用即可完成设置.

360浏览器划词搜索取消方法

  360浏览器是国内用户常用的浏览器之一,在使用过程中,很多用户都发现了,只要选中了一段文字,它的右上角就会出现搜索和复制两个选项,这就是360浏览器的划词搜索功能,有时候这个功能会影响我们的操作,或者我们想把360的划词搜索改成百度可以吗,怎么取消360浏览器划词搜索,360浏览器划词搜索可以改成百度吗,下面小编就给大家带来360浏览器划词搜索取消方法. 1.打开360浏览器,在右上角的菜单栏里点击工具 2.从弹出的下拉菜单中选中选项. 3.然后360浏览器会打开一个名为选项-基本设置的标签

javascript实现划词标记+划词搜索功能_javascript技巧

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  <html>  <head>  <title>Untitled Document</title>  <meta http-equiv="Content-Type" content="text/html; charset=gb2312"

javascript实现划词标记+划词搜索功能

javascript 采用JAVASCRIPT方法为鼠标划选的文字加上着重样式,同时还有搜索功能.演示效果就请看本BLOG页面上用鼠标划选文字的效果 完整示例代码如下 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Untitled Document</title><meta http-equiv=&quo

javascript实现划词标记+划词搜索功能代码实例

javascript <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

&amp;#106avascript实现划词标记划词搜索功能

完整示例代码如下: 以下是引用片段:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&q