《JavaScript》DOM 图片跟随鼠标移动

最新推荐文章于 2023-09-18 19:29:57 发布

原创最新推荐文章于 2023-09-18 19:29:57 发布 · 527 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言

本文介绍了使用JavaScript如何实现图片跟随鼠标移动的效果。通过监听鼠标离开文档事件'mouseleave'，获取鼠标坐标并设置图片的left和top属性，达到图片随鼠标移动的目的。在移动鼠标时，图片位置会实时更新，控制台显示不断变化的坐标值。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		img
		{
			position: absolute;
			top: 2px;
		}

		</style>
	</head>
	<body>
		<img src="img/1.jpg" alt="">
		<script>
		var pic = document.querySelector('img');
		document.addEventListener('mouseleave',function(e)
		{
			
			var x = e.pageX;
			var y = e.pageY;
			console.log('x坐标' + x, 'y坐标' + y);
			pic.style.left = x + 'px';
			pic.style.left = y + 'px';
		});

		</script>
	</body>
</html>

随便一张图片<img src="img/1.jpg" alt="">

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

document.addEventListener('mouseleave',function(e)

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

var x = e.pageX;
var y = e.pageY;
           console.log('x坐标' + x, 'y坐标' + y);
           pic.style.left = x + 'px';
           pic.style.left = y + 'px'；