JS简单实现鼠标跟随

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

Tochanges

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

阅读量1.1k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/Tochanges/article/details/104457732

版权

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

摘要由CSDN通过智能技术生成

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"