頁面劃詞搜索JS

文章來源：365jz.com 點擊數(shù)：439 更新時間：2009-10-05 21:44 參與評論

第一次在博客園發(fā)文，也是第一次用Live Writer發(fā)文，更是第一次測試下帖代碼的效果。廢話了一大堆，不知道最后效果怎么樣。

先說明下，這個腳本是網(wǎng)上的代碼修改的，兼容各主流瀏覽器，優(yōu)化頁面異步加載的文字的檢索提示框定位，根據(jù)選擇文字位置與屏幕尺寸計算檢索提示框定位。

基于Jquery修改，以下為全部腳本

//劃詞搜索
var GLS = {};
GLS.startObj = null;
GLS.isdb = false;
GLS.allow = true;
GLS.isallow = function() {
    if (GLS.allow) {
        GLS.allow = false;
        alert('Google搜索已關(guān)閉');
    }
    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;}