一个类似百度文库选中弹出个小框的效果

最新推荐文章于 2025-08-14 17:31:00 发布

weixin_30325971

最新推荐文章于 2025-08-14 17:31:00 发布

阅读量54

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/RightDear/p/3174010.html

本文介绍了一个利用JavaScript实现的功能，当鼠标抬起时，不仅获取到鼠标位置，还能捕捉选中文本，并根据该位置在页面上动态显示出来。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
 2 transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6 <title>JS获得鼠标位置</title>
 7 <script src="jquery-1.8.3.js" type="text/javascript"></script>
 8 </head>
 9 <body>
10 <script>
11     function mouseCoords(ev)
12     {
13         if(ev.pageX || ev.pageY){
14             return {x:ev.pageX, y:ev.pageY};
15         }
16         return {
17             x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
18             y:ev.clientY + document.body.scrollTop - document.body.clientTop
19         };
20     }
21     function funcGetSelectText(){
22         var txt = '';
23         if(document.selection){
24                 txt = document.selection.createRange().text;//ie
25         }else{
26                 txt = document.getSelection();
27         }
28         return txt.toString();
29     }
30 $(function(){
31 
32     var container = container || document;
33     container.onmouseup = function(ev){
34             var txt = funcGetSelectText();
35             if(txt)
36             {
37                 alert("搜索关键字:"+txt);
38                 ev= ev || window.event;
39                 var mousePos = mouseCoords(ev);
40                 var posX = mousePos.x+10;
41                 var posY = mousePos.y+5;
42                 $("#test").css({"position":"absolute","left":posX,"top":posY,"display":"block"});
43                 $("#test").html(txt);
44             }
45             else
46                 {
47                 $("#test").css("display","none");
48                 }
49     }
50 
51 
52 
53 });
54 </script>
55 <script>
56 
57 
58     </script>
59     <div id="str" style="width: 100%;height: 100%;">百度测试百度测试百度测试啊百度测试啊百度测试啊百度测试啊百度测试啊百度测试啊</div>
60 <div id='test' style="width: 200px;height: 25px; background-color: red;display: none;"><a href="www.baidu.com"></a></div>
61 </body>