实现图片跟随鼠标移动

最新推荐文章于 2024-10-30 22:25:38 发布

Icey.xu

最新推荐文章于 2024-10-30 22:25:38 发布

阅读量5.5k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_43023116/article/details/87866204

下面代码可以实现图片跟随鼠标移动

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		img {
			position: absolute;
			width: 100px;
		}
	</style>
</head>
<body>

//图片可以是jpg、png、gif的，推荐使用相对路径
	<img src="./images/10.gif" id="mv">
<script type="text/javascript">
	//onmousemove 当鼠标移动时，触发事件
	var mv = document.getElementById("mv");
	document.onmousemove = function (e){
		var e = e || window.event;
		// 用于获取鼠标针对页面可视区的横纵坐标
		//console.log(e.clientX, e.clientY);
		mv.style.left = e.clientX + "px";
		mv.style.top = e.clientY + "px";
		}
	</script>
</body>
</html>