• 技术文章 >web前端 >js教程

    基于jquery的页面划词搜索JS_jquery

    2016-05-16 18:19:47原创546
    基于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("Google搜索");
    }
    else {
    obj.css("display", "none");
    }
    };

    //页面加载
    $(document).ready(function() {
    $(document.body).append("
    ");
    $(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;}----------search.gif图片

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:页面划词
    上一篇:JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件_jquery 下一篇:Asp.net下使用Jquery Ajax传送和接收DataTable的代码_jquery
    Web大前端开发直播班

    相关文章推荐

    • 完全掌握JavaScript运行机制及原理• 一文浅析Angular中的响应式表单• 聊聊node中的fs模块、path模块• 你能搞懂JS的this指向问题吗?看看这篇文章• 浅析Angular中怎么用 Api 代理

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网