JS简单实现鼠标跟随

最新推荐文章于 2023-01-02 01:48:07 发布

原创

最新推荐文章于 2023-01-02 01:48:07 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文通过JavaScript代码展示了如何实现鼠标在网页上移动时，元素跟随鼠标的动态效果。通过结合HTML和JS，创建了一个简单的交互式用户体验。

html代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鼠标跟随</title>
		<style type="text/css">
			div{
				width: 10px;
				height: 10px;
				background: skyblue;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

js代码：

<script type="text/javascript">
			var oDiv = document.querySelectorAll("div");//获取dom元素(集合)
			document.onmousemove = function(e){//鼠标移动事件
				var evt = e || event;//获取事件源
				var x = evt.clientX;//获取鼠标位置
				var y = evt.clientY;
				oDiv[0].style.left = x+"px";//第一个div的left值
				oDiv[0].style.top = y+"px";//第一个div的top值
				for(var i = oDiv.leng