让一个div块随鼠标移动

最新推荐文章于 2022-08-20 13:28:45 发布

原创最新推荐文章于 2022-08-20 13:28:45 发布 · 2.9k 阅读

5 ·

CC 4.0 BY-SA版权

JS学习历程专栏收录该内容

2 篇文章

订阅专栏

一个简单的小练习，实现当鼠标移动时，div块跟随鼠标的移动而移动，需要注意的是只有开启div的定位，div才会移动

onmousemove：鼠标移动事件

clientX和clientY：获取鼠标在当前可见窗口的坐标

scrollTop：垂直滚动条滚动的距离

scrollLeft：水平滚动条滚动的距离

- 在chrome中，scrollTop和scrollLeft是body的属性，而在火狐中则是属于html的属性，所以要注意兼容性的问题

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>div随鼠标移动</title>
	<style type="text/css">
		#box1 {
			width: 100px;
			height: 100px;
			background-color: red;
			position: absolute;
		}
	</style>
	<script type="text/javascript">
		window.onload = function() {
			var box1 = document.getElementById("box1");
			document.onmousemove = function(event) {

				// 解决兼容性问题
				event = event || window.event;
				var st = document.body.scrollTop || document.documentElement.scrollTop;
				var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
				
				var left = event.clientX;
				var top = event.clientY;

				box1.style.left = left + sl +  "px";
				box1.style.top = top +  st +"px";
			};
		};
	</script>
</head>
<body style="height:1800px;width:1800px">
	<div id="box1" ></div>
</body>
</html>

注意：clientX和clientY只获取鼠标在当前可见窗口的坐标（即相对于下图绿色框的左上角坐标），而div的移动偏移量是相对于整个页面的（即相对于下图红色框的左上角坐标）。由于页面的大小会大于当前的窗口大小，所以在这种情况下，div的偏移量会出现偏差，而实际div的偏移量应该是鼠标的坐标加上滚动条滚动的距离。