JavaScript学习笔记——div跟随鼠标移动

最新推荐文章于 2022-10-25 12:04:46 发布

真爱计划

最新推荐文章于 2022-10-25 12:04:46 发布

阅读量518

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/weixin_64612659/article/details/126330132

JavaScript 专栏收录该内容

93 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现HTML页面中DIV元素跟随鼠标移动的方法。通过为DIV元素设置绝对定位，并利用onmousemove事件获取鼠标位置，从而实时更新DIV的位置坐标，使其能够随着鼠标的移动而移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				/* div不能移动，解决方案：开启box1的绝对定位 */
				position: absolute;
			}
		</style>
		<script>
			window.onload=function(){
				// 使div跟随鼠标移动
				var box1=document.getElementById("box1");
				document.onmousemove=function(event){
					event=event||window.event
					// 获取鼠标的坐标
					// clientX和clientY
					// 用于获取鼠标当前的可见窗口的坐标
					// div的偏移量相对整个页面
					// pageX和pageY可以获取鼠标当前页面的坐标
					var left=event.pageX;
					var top=event.pageY;
					// 设置div的偏移量
					box1.style.left=left+"px";
					box1.style.top=top+"px";
					
				}
			}
		</script>
	</head>
	<body style="height: 1000px;">
		<div id="box1"></div>
	</body>
</html>