js 划词查询 

 1 <html>
 2 
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>划词搜索</title>
 6     <style>
 7     .ttb-box {
 8         display: none;
 9         position: absolute;
10         cursor: pointer;
11     }
12     </style>
13 </head>
14 
15 <body>
16     <div class="demo">
17         <div id="testContent">
18             老夫聊发少年狂，左牵黄，右擎苍，锦帽貂裘，千骑卷平冈。
19             为报倾城随太守，亲射虎，看孙郎。
20             酒酣胸胆尚开张。
21             鬓微霜，又何妨！
22             持节云中，何日遣冯唐？会挽雕弓如满月，西北望，射天狼。
23         </div>
24         <div id="ttb" class="ttb-box" title="demo" style="background: pink;width:100px;">123456
25         </div>
26     </div>
27     <script>
28     // var ttp = document.getElementById('ttp');
29 
30     /**
31      * 划词查询方法
32      * @toolTipsBox: 划词弹窗盒子
33      * @eleContainer: 需要划词的盒子
34      * */
35     var underlineWord = function(toolTipsBox, eleContainer) {
36         debugger;
37         eleContainer = eleContainer || document;
38         var funGetSelectTxt = function() {
39             debugger;
40             var txt = "";
41             if (document.selection) {
42                 txt = document.selection.createRange().text; // IE
43             } else {
44                 txt = document.getSelection();
45             }
46 
47             return txt.toString();
48         };
49         eleContainer.onmouseup = function(e) {
50             e = e || window.event;
51             var txt = funGetSelectTxt(),
52                 sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
53             var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40,
54                 top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
55             if (txt) {
56                 toolTipsBox.style.display = "inline";
57                 toolTipsBox.style.left = left + "px";
58                 toolTipsBox.style.top = top + "px";
59                 toolTipsBox.innerHTML = txt;
60             } else {
61                 toolTipsBox.style.display = "none";
62             }
63         };
64         toolTipsBox.onclick = function(e) {
65             var txt = funGetSelectTxt();
66         };
67     }(ttb, testContent);
68     </script>
69 </body>
70 
71 </html>

 

posted @ 2023-03-27 17:57  CorderBob  阅读(45)  评论(0)    收藏  举报