javascript 页面划词搜索JS

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

(0)

相关推荐

  • javascript提取URL的搜索字符串中的参数(自定义函数实现)

    今天在犀牛书上发现了一个有用的函数 urlArgs(提取URL的搜索字符串中的参数).我们经常会看到有的页面链接地址后面会跟有参数,比如 http://www.xxx.com/?username=yyy&password=zzz 之类的,很多时候我们需要获得这些参数的值(yyy和zzz),那么就可以利用 urlArgs 函数,通过该函数的返回值(返回值是对象)的属性来获取. urlArgs 函数代码: 复制代码 代码如下: function urlArgs(){ var args = {}; v

  • 基于javascript实现的搜索时自动提示功能

    当在数据量不是很大,而且没有后端对应的功能接口的时候,一些简单的搜索功能基本上是前端去实现的,正好最近用到,写了一个,贴出来和大家分享: 效果图: 功能描述: 按下键盘后及时搜索条目中的汉字,汉字对应的拼音和号码: 实现思路: 先将条目中的汉字转换成拼音,然后将汉字,拼音,数字拼接成规律的字符串,放入数组,然后每次按下键盘后判断 input 中的值是汉字,拼音,还是数字,然后按固定的规律去循环数组,这样就能找到对应的条目了: 启用方式: // search-test-inner --->  最外

  • JavaScript搜索字符串并将搜索结果返回到字符串的方法

    本文实例讲述了JavaScript搜索字符串并将搜索结果返回到字符串的方法.分享给大家供大家参考.具体如下: javascript操作字符串带有一个match方法用于搜索字符串,如果找到指定的字符串则返回搜索字符串,如果未找到则返回null,match方法区分大小写 <!DOCTYPE html> <html> <body> <script> var str="Hello world!"; document.write(str.match

  • javascript搜索框点击文字消失失焦时文本出现

    当获焦时,文本消失,失焦时文本出现 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <input id="text" type="text" value="点我就消失"/> <scrip

  • javascript下搜索子字符串的的实现代码(脚本之家修正版)

    例如有这么一个字符串<img src='test' alt=123>xtxtxt<img src='test' alt=321>1221<img src='test' alt=yes>,我要从中找出所以alt的值,同时还有非标签中的值,想这个例子中,就是要搜索出123xtxtxt3211221yes这个结果来 ,还有一点就是 原字符串是不确定的,是由用户输入的 test //搜索出所有alt的值和innerHTML的值 var tmp=""; var

  • JavaScript中数组的排序、乱序和搜索实现代码

    1. 排序: 默认的sort()按字符编码排序的: 复制代码 代码如下: <script type="text/javascript"> <!-- var testArray=[3,324,5345,6546,134,5654,665]; testArray.sort(); alert(testArray); //--> </script> 现在要让它按照数值大小排序: 复制代码 代码如下: <script type="text/ja

  • javascript 多种搜索引擎集成的页面实现代码

    - 输入一个关键词,鼠标点击后面的搜索引擎链接,即可进入到该引擎的页面 - 如果输入关键词后敲回车,则使用默认搜索引擎,而每选择新的搜索引擎,默认引擎也会随之改变 - 自动记忆上次使用的搜索引擎,后面添加* 源代码如下,使用了多种IE/FF的适应办法: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"&

  • javascript 页面划词搜索JS

    基于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的页面划词搜索JS

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

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

    javascript实现划词标记划词搜索功能 0) { str=oText.text; oText.text="BuB"+oText.text+"EuE"; } oText.select(); event.srcElement.innerHTML=event.srcElement.innerHTML.replace("BuB","").replace("EuE",""); } searc

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

  • 利用Python通过获取剪切板数据实现百度划词搜索功能

    一.实现划词功能 说是划词翻译,实际上我们是通过获取用户的剪切板内容,通过一系列的操作得到的.首先呢,我们就先实现如何获取剪切板内容的程序 首先先在桌面创建一个文件夹,命名为"MoveSearch"文件夹 之后我们双击点入这个文件夹,创建一个"MainWindow.py"的程序和"Clipborad.py"这两个程序 我们这里使用Sublime进行操作演示,我们点开"ClipBoard.py"的文件,然后我们按照下面的图片添加

  • 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实现划词标记划词搜索功能修正版

    Untitled Document 0) { str=oText.text; oText.text="BuB"+oText.text+"EuE"; } oText.select(); event.srcElement.innerHTML=event.srcElement.innerHTML.replace("BuB","").replace("EuE",""); } searchgoog

  • js性能优化 如何更快速加载你的JavaScript页面

    确保代码尽量简洁 不要什么都依赖JavaScript.不要编写重复性的脚本.要把JavaScript当作糖果工具,只是起到美化作用.别给你的网站添加大量的JavaScript代码.只有必要的时候用一下.只有确实能改善用户体验的时候用一下. 尽量减少DOM访问 使用JavaScript访问DOM元素很容易,代码更容易阅读,但是速度很慢.下面介绍几个要点:限制使用JavaScript来修饰网页布局,把针对访问元素的引用缓存起来.有时,当你的网站依赖大量的DOM改动时,就应该考虑限制你的标记.这是改用

  • JavaScript实现前端实时搜索功能

    大部分页面都具备搜索功能.而作为前端,我们的目的只是将用户输入的内容返回给后台而后呈现反馈数据给用户,具体实现如下: 1.基本布局: <div class="searcher"> <p class="searcher-main"> <i><img src="img/icon/icon-search-map.png"/></i> <input class="searcher

  • jquery实现联想词搜索框和搜索结果分页的示例

    index.htm <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <ti

随机推荐