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

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

glglgl1

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

阅读量482

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/glglgl1/article/details/123857034

版权

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

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

<!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作为图片的t

最低0.47元/天解锁文章

glglgl1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript》DOM 图片跟随鼠标移动

<!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="".
复制链接

扫一扫