<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>划词搜索</title>
<style>
.ttb-box {
display: none;
position: absolute;
cursor: pointer;
}
</style>
</head>
<body>
<div class="demo">
<div id="testContent">
老夫聊发少年狂，左牵黄，右擎苍，锦帽貂裘，千骑卷平冈。
为报倾城随太守，亲射虎，看孙郎。
酒酣胸胆尚开张。
鬓微霜，又何妨！
持节云中，何日遣冯唐？会挽雕弓如满月，西北望，射天狼。
</div>
<div id="ttb" class="ttb-box" title="demo" style="background: pink;width:100px;">123456
</div>
</div>
<script>
// var ttp = document.getElementById('ttp');
/**
* 划词查询方法
* @toolTipsBox: 划词弹窗盒子
* @eleContainer: 需要划词的盒子
* */
var underlineWord = function(toolTipsBox, eleContainer) {
debugger;
eleContainer = eleContainer || document;
var funGetSelectTxt = function() {
debugger;
var txt = "";
if (document.selection) {
txt = document.selection.createRange().text; // IE
} else {
txt = document.getSelection();
}
return txt.toString();
};
eleContainer.onmouseup = function(e) {
e = e || window.event;
var txt = funGetSelectTxt(),
sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX - 40,
top = (e.clientY - 40 < 0) ? e.clientY + sh + 20 : e.clientY + sh - 40;
if (txt) {
toolTipsBox.style.display = "inline";
toolTipsBox.style.left = left + "px";
toolTipsBox.style.top = top + "px";
toolTipsBox.innerHTML = txt;
} else {
toolTipsBox.style.display = "none";
}
};
toolTipsBox.onclick = function(e) {
var txt = funGetSelectTxt();
};
}(ttb, testContent);
</script>
</body>
</html>
