跟随鼠标 mousemove

最新推荐文章于 2022-11-19 11:49:11 发布

hcoke

最新推荐文章于 2022-11-19 11:49:11 发布

阅读量336

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/m0_62962469/article/details/123617764

版权

JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img {
				position: absolute;
				top: 2px; 
			}
		</style>
	</head>
	<body>
		<img src="images/angel.gif" >
		<script type="text/javascript">
			var pic = document.querySelector('img');
			//1.mousemove只要我们鼠标移动1px 就会触发这个事件
			document.addEventListener('mousemove', function(e) {
			//2.核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值 就可以移动图片
			var x = e.pageX;
			var y = e.pageY;
			//console.log('x坐标是' + x,'y坐标是' + y);
			//3. 不要忘记给left与top添加px单位  假如跟随的位置不在图片的中心位置 根据图片的大小给坐标调整下数值即可
			pic.style.left = x - 50 + 'px';
			pic.style.top = y - 40 + 'px';
			});
		</script>
	</body>
</html>

1.mousemove只要我们鼠标移动1px 就会触发这个事件

2.核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标作为图片的top和left值就可以移动图片

3. 不要忘记给left与top添加px单位假如跟随的位置不在图片的中心位置根据图片的大小给坐标调整下数值即可