仿百度搜索

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
    #content {
    width:500px;
    height:200px;
    margin:50px auto;
    border:1px solid #ccc;
    padding:10px;
    border-radius: 5px;
    overflow: auto;
}
#nav_menu {
    width:100px;
    height:30px;
    background: #fff;
    line-height: 30px;
    padding:5px;
    border-radius: 5px;
    border:1px solid #ccc;
    display: none;
    position: fixed;
    top:0;
    left:0;
}
#nav_menu button {
    background: transparent;
    border:0;
    color:green;
    cursor: pointer;
}
#nav_menu button:hover {
    color: red;
}
</style>
</head>
<body>
    <div id="content" onmouseup="change(event)">
    前劳斯莱斯规划履行官吉尔斯泰勒现已搬到一汽轿车部门红旗，从事豪华车的出产。该***转换为“红旗”，出产一些最贵重的中国轿车。贾尔斯泰勒具有26年轿车规划生计，曾先后服务于雪铁龙、捷豹和劳斯莱斯***，主导规划了雪铁龙C3概念车和捷豹XJ、XK等车型。来源:百家号
   </div>
<p id="nav_menu"><button onclick="copyText()">复制</button>|<button onclick="getSearch()">搜索</button></p>
<script type="text/javascript">
  function getSelect(){
   return window.getSelection().toString();
  }
  function change(event){
   var str=getSelect();
   var e=event || window.event;
   if(str.length>0){
    var x=e.clientX;
    var y=e.clientY;
    var menu=document.getElementById('nav_menu');
    menu.style.left=x+'px';
    menu.style.top=y+"px";
    menu.style.display="block";
   }else{
    menu.style.display="none";
   }
  }

  function copyText(){
   document.execCommand('Copy');
   document.getElementById('nav_menu').style.display="none";
  }

  function getSearch(){
   if(getSelect()){
    window.location.href="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp=1&rsv_idx=1&tn=baidu&wd="+getSelect();
   }
   document.getElementById('nav_menu').style.display="none";
  }
</script>

</body>
</html>

相关文章