实例
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>仿百度文库中文字搜索的效果</title>
<style type="text/css">
#main{
width:500px;
height:300px;
border:1px solid #ccc;
margin:100px auto;
}
#show{
display: none;
position:fixed;
top:0;
left:0;
}
#show button{
outline:none;
}
</style>
</head>
<body>
<span id="show"><button onclick="on_Copy()">复制</button> <button onclick="on_Search()">搜索</button></span>
<div id="main" onmouseup="change(event)"><p>在线互动式文档分享平台，在这里，您可以和千万网友分享自己手中的文档，全文阅读其他用户的文档，同时，也可以利用分享文档获取的积分下载文档</p></div>
<script>
function getselect(){
return window.getSelection().toString();
}
function change(event){
var e=event || window.event;
var omain=document.getElementById('main');
var oshow=document.getElementById('show');
var sel=getselect();
var m_x=e.clientX;
var m_y=e.clientY;
if(sel.length>0){
oshow.style.display="block";
oshow.style.left=m_x+'px';
oshow.style.top=m_y+'px';
}else{
oshow.style.display="none";
}
}
function on_Copy(){
document.execCommand("Copy");
var oshow=document.getElementById('show');
oshow.style.display="none";
}
function on_Search(){
var oshow=document.getElementById('show');
oshow.style.display="none";
if(getselect()){
window.location.href="https://www.baidu.com/s?ie=UTF-8&wd="+getselect();
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例