您现在的位置: 365建站网 > 365文章 > 页面划词搜索JS

页面划词搜索JS

文章来源:365jz.com     点击数:437    更新时间:2009-10-05 21:44   参与评论

第一次在博客园发文,也是第一次用Live Writer发文,更是第一次测试下帖代码的效果。废话了一大堆,不知道最后效果怎么样。

先说明下,这个脚本是网上的代码修改的,兼容各主流浏览器,优化页面异步加载的文字的检索提示框定位,根据选择文字位置与屏幕尺寸计算检索提示框定位。

基于Jquery修改,以下为全部脚本

</>code

  1. //划词搜索
  2. var GLS = {};
  3. GLS.startObj = null;
  4. GLS.isdb = false;
  5. GLS.allow = true;
  6. GLS.isallow = function() {
  7. if (GLS.allow) {
  8. GLS.allow = false;
  9. alert('Google搜索已关闭');
  10. }
  11. else {
  12. GLS.allow = true;
  13. alert('Google搜索已打开');
  14. }
  15. };
  16. GLS.dblclick = function() {
  17. GLS.isdb = true;
  18. };
  19. GLS.mousedown = function(evt) {
  20. evt = (evt) ? evt : ((window.event) ? window.event : "");
  21. if (evt) {
  22. GLS.startObj = (evt.target) ? evt.target : evt.srcElement;
  23. }
  24. };
  25. GLS.mouseup = function(evt) {
  26. var obj;
  27. var strlen;
  28. evt = (evt) ? evt : ((window.event) ? window.event : "");
  29. if (evt) {
  30. obj = (evt.target) ? evt.target : evt.srcElement;
  31. strlen = window.getSelection ? window.getSelection().toString() : document.selection.createRange().text;
  32. }
  33. var str = "";
  34. if (obj.tagName != "A" && obj.tagName != "INPUT" && obj == GLS.startObj && !GLS.isdb && GLS.allow) {
  35. if (strlen.length > 0) {
  36. str = strlen;
  37. }
  38. }
  39. GLS.search(str, evt);
  40. GLS.isdb = false;
  41. };
  42. GLS.search = function(str, evt) {
  43. var obj = $("#GLSearch");
  44. var sDivWidth = 88; //检索框“Google搜索”的宽度
  45. if (str.toString().length > 0) {
  46. var windowWidth; //窗口的宽
  47. //取得窗口的宽
  48. if (self.innerWidth) {
  49. windowWidth = self.innerWidth;
  50. } else if (document.documentElement && document.documentElement.clientWidth) {
  51. windowWidth = document.documentElement.clientWidth;
  52. } else if (document.body) {
  53. windowWidth = document.body.clientWidth;
  54. }
  55. obj.css({ 'display': 'block', 'position': 'absolute', 'zindex': '10000' });
  56. var rX, rX, wT;
  57. if ($.browser.msie) {
  58. wT = (evt.clientX + sDivWidth) - windowWidth;
  59. rY = document.documentElement.scrollTop + evt.clientY;
  60. rX = document.documentElement.scrollLeft + evt.clientX;
  61. rY = (evt.clientY < 25) ? rY + 5 : rY - 25;
  62. rX = (wT > 0) ? rX - wT : rX + 5;
  63. }
  64. else {
  65. var sT = (document.documentElement.scrollTop > 0) ? document.documentElement.scrollTop : document.body.scrollTop;
  66. wT = (evt.pageX + sDivWidth) - windowWidth;
  67. rY = ((evt.pageY - sT) < 25) ? evt.pageY + 5 : evt.pageY - 25;
  68. rX = (wT > 0) ? evt.pageX - wT : evt.pageX + 5;
  69. }
  70. obj.css("top", rY);
  71. obj.css("left", rX);
  72. 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>");
  73. }
  74. else {
  75. obj.css("display", "none");
  76. }
  77. };
  78. //页面加载
  79. $(document).ready(function() {
  80. $(document.body).append("<div id='GLSearch'></div>");
  81. $(document).mousedown(GLS.mousedown).dblclick(GLS.dblclick).mouseup(GLS.mouseup);
  82. });

</>code

  1. ------------

</>code

  1. 附上CSS

</>code

  1. /*search*/
  2. 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;}
  3. a.GL_s:link{filter:alpha(opacity=71);-moz-opacity:0.7;opacity: 0.7;}
  4. a.GL_s:hover{filter:alpha(opacity=100);-moz-opacity:1.0;opacity: 1.0;}

</>code

  1. ----------

</>code

  1. search.gif图片

</>code

  1. search
其实这篇文章就是测试下是否发文成功:) Tag标签: 划词,划词检索,javascript

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (437人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号