js基础学习-仿百度搜索

<!DOCTYPE html>
<html>
<head>
	<title>防百度文字搜索</title>
	<style type="text/css">
		#box{
			width: 200px;height: 200px;	
			margin: 100px auto;
			background: #ccc;
			padding: 10px;
			text-indent: 2em;	/*段落缩进*/
		}
		#nav_menu{
			width: 100px;height: 30px;
			background: $fff;
			padding: 5px;
			border-radius: 5px;
			border:1px solid $ccc;
			display: none;
			position: fixed;top: 0;left: 0;	/*固定定位*/
		}
		button{
			border:none;
			 color:red;
		}
		#nav_menu button:hover{
			color: green;
		}
	</style>
</head>
<body>
	<div id="box" onmouseup="change()">
		深山的尽头，一朵蔷薇花轻轻地落下，一如绽放时那般小心翼翼。零落着的如梦的春晖，齐齐消散在远方，轻点墨汁，写一段属于它的岁月。芳华陨落确为平凡的故事，盛放的韶华乃时间无法留住，于是一切应当归为平静。
	</div>
	<p id="nav_menu"><button onclick='copyText()'>复制</button>|<button onclick="getSearch()">搜索</button></p>

<script type="text/javascript">
	//创建一个方法,内容为你所
	function getSelect(){
		//这个操作是返回用户返回的一个文本,然后转换为字符串;
		return window.getSelection().toString()	//gerSelection()方法可以返回selection对象,用于表示用户选择的文本范围
	}

	function change(event){
		//多种浏览器兼容;
		var e=event || window.event;
		var str=getSelect();	//用户获取文本的范围;
		//判断是否有获取文本的长度;
		if (str.length>0) {
			var x=e.clientX	//鼠标获取x轴坐标
			var y=e.clientY	//鼠标获取y轴坐标
			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=8&rsv_bp=1&tn=monline_4_dg&wd="+getSelect()
      }
      //点击事件后样式就消失;
      document.getElementById('nav_menu').style.display="none"
    
 }

</script>
</body>
</html>
总结:有点不明白left,top:
menu.style.left=x+'px';
menu.style.top=y+'px';
样式还可以改变成这个样;服!!!
相关文章
