JS基础-div随鼠标移动-尚硅谷-P112

最新推荐文章于 2024-09-20 11:38:47 发布

比目鱼～

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量102

点赞数

分类专栏： JS 文章标签： javascript css3 html5

本文链接：https://blog.csdn.net/qq_43624193/article/details/122721820

版权

JS 专栏收录该内容

23 篇文章 3 订阅

订阅专栏

视频地址：
视频

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		#box1{
			width: 100px;
			height: 100px;
			background-color: #6495ED;
			position: absolute;
		}
		</style>
		<script type="text/javascript">
		window.onload=function(){
			var box1=document.getElementById("box1");
			document.onmousemove=function(event){
				//解决兼容性问题
				event=event||window.event;
				//获取鼠标滚动条滚动的距离 解决兼容性问题
				var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
				var scrollLeft=document.body.scrollLeft||document.documentElement.scrollLeft;
				//var st=document.documentElement.scrollTop;
				/**
				 * clientX获取鼠标在可见窗口的坐标
				 * pageX鼠标相对于页面的坐标 但是这两个属性不兼容IE8 
				 */
				var left=event.clientX;
				var top=event.clientY;
				box1.style.left=left+scrollLeft+"px";
				box1.style.top=top+scrollTop+"px";
			};
		};
		</script>
	</head>
	<body style="height: 1000px;">
		<div id="box1"></div>
	</body>
</html>