其他分享
首页 > 其他分享> > 2021-10-07小方块随鼠标移动

2021-10-07小方块随鼠标移动

作者:互联网

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>div移动</title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				background-color: red;
				position: absolute;
			}
		</style>
		<script>
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var st = document.documentElement.scrollTop || document.body.scrollTop;
				var str = document.documentElement.scrollLeft || document.body.scrollLeft;
				document.onmousemove = function(event){
					var x= event.pageX;
					var y=event.pageY;
					box1.style.left = x +str+"px";
					box1.style.top = y +st+"px";					
				};
			};
		</script>
	</head>
	<body  style="height: 1000px;width: 2000px;">
		<div id="box1"></div>
	</body>
</html>

标签:body,10,小方块,100px,2021,var,document,box1,event
来源: https://blog.csdn.net/JaneZJW/article/details/120639740