javascript（移动的div）

最新推荐文章于 2023-04-12 17:20:24 发布

make sense

最新推荐文章于 2023-04-12 17:20:24 发布

阅读量1k

点赞数

分类专栏： js小实例

本文链接：https://blog.youkuaiyun.com/baidu_41861751/article/details/83861311

版权

js小实例专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了一个使用HTML、CSS和JavaScript实现的鼠标跟随效果案例。通过监听鼠标移动事件，使页面上的红色方块实时跟随鼠标位置移动，即使在滚动页面时也能准确跟随。文章提供了完整的代码示例，并解释了如何解决不同浏览器的兼容性问题。

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

一、效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box1{
				width: 100px;
				height: 100px;
				position: absolute;
				background-color: red;
			}
			
		</style>
		<script>
			window.onload = function(){
				var box1=document.getElementById("box1");
				document.onmousemove = function(event){
					
					//解决兼容性问题
				    event = event || window.event;
				    //获取鼠标的坐标
				    
				    //相当于当前页面的坐标/*ie8不兼容*/
				    /* var x = event.pageX;
				    var y = event.pageY;*/
				    //获取当前可见窗口的坐标
				    var x = event.clientX;
				    var y = event.clientY;
				    
				    //获取滚动的条的滚动的距离 
				    //设置div的偏移量   它是相当于整个页面的偏移的
				    /*var st = document.body.scrollTop; //chrome 兼容
				    var st = document.documentElement.scrollTop;//除了chrome都兼容*/
				    
				   
				   var st = document.body.scrollTop||	document.documentElement.scrollTop;
				   //水平的同理
				   var xt = document.body.scrollLeft||	document.documentElement.scrollLeft;		  
				    
				   box1.style.left =x+xt+"px";
				   box1.style.top=y+st+"px";
				  
				}
			}
			
		</script>
	</head>
	<body style="height: 1000px; width: 2000px;">
		<div id="box1">
		</div>
	</body>
</html>

在代码中我把 body设置了宽度和高度，是为了看出当页面有滚动条的时候，当你移动了滚动条再去移动div

div和鼠标会产生一定的距离。所以才有了这一步。如果觉得不需要删除即可。

 var st = document.body.scrollTop||	document.documentElement.scrollTop;
				   //水平的同理
  var xt = document.body.scrollLeft||	document.documentElement.scrollLeft;