JavaScript div跟随鼠标移动

最新推荐文章于 2022-10-26 09:14:21 发布

Tmil

最新推荐文章于 2022-10-26 09:14:21 发布

阅读量1k

点赞数

分类专栏： JavaScript 笔记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_46067727/article/details/124529066

版权

JavaScript 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

笔记

12 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>div跟随鼠标移动</title>
	<style type="text/css">
		#box1{
			width: 100px;
			height: 100px;
			background-color: green;
			position: absolute;
			/* 开启box1的绝对定位 */
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var box1=document.getElementById("box1");
			document.onmousemove=function(event){
				event=event||window.event;
				/*获取滚动条滚动的距离,chrome认为浏览器的滚动条是body的，可以通过body.scollTop获取，火狐等认为滚动条是html的*/
				//判断兼容
				var st=document.body.scrollTop||document.documentElement.scrollTop;
				var sl=document.body.scrollLeft||document.documentElement.scrollLeft;
				var left=event.clientX;
				var top=event.clientY;
				/*clientX、clientY获取鼠标在当前可见窗口的坐标，div的偏移量是相对于整个页面的
				pageX、pageY获取鼠标相对于当前页面的坐标，但是IE8不支持*/
				box1.style.left=left+sl+"px";
				box1.style.top=top+st+"px";
			};
		};
	</script>
</head>
<body style="height: 1000px;width: 2000px">
	<div id="box1"></div>
</body>
</html>

(作者观看的学习视频：B站尚硅谷）