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>
