鼠标跟div一起移动

最新推荐文章于 2023-04-27 18:04:03 发布

小任的blog

最新推荐文章于 2023-04-27 18:04:03 发布

阅读量193

点赞数 2

分类专栏： javascr

本文链接：https://blog.youkuaiyun.com/qq_43406483/article/details/88542189

版权

javascr 专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	 #box {
	 	height: 50px;
	 	width: 50px;
	 	background-color: red;
	 	position: absolute;
	 }
	 body {
	 	height: 1000px;
	 	background-color: pink;
	 }
    </style>
</head>
<body>
   <div id="box"></div>
</body>
</html>
<script type="text/javascript">
	var box = document.getElementById("box");
	//alert(box);
	//当事件给box绑定时，鼠标只有在box中时，div才会跟着鼠标动
	//当事件绑定给整个页面（页面对象document）时，只要鼠标在HTML页面时事件就会被触发，次此时div能随着鼠标移动
	document.onmousemove = function( event ) {
		//alert("helllo");
		
		//解决兼容问题
		var event = event || window.event;
		//#####
        var ht = document.documentElement;
		//获取鼠标的坐标
		var left = event.clientX + ht.scrollLeft ;
		var top = event.clientY + ht.scrollTop ;

		//alert( left +","+ top);
		/*滚动条问题
		   Chrome认为滚动条是body的 可以通过body.scrollTop来获取
		   火狐等浏览器认为滚动条是html的*/

		//用鼠标的坐标 设置div的 偏移量(style) x,y(有单位单位为px)为div设置定位！！！！
         box.style.left = left + "px";
         box.style.top = top + "px";
	}
</script>