js案例:跟随鼠标的天使

m0_63400611

已于 2022-05-18 16:01:12 修改

阅读量209

点赞数

分类专栏： js 文章标签： javascript 开发语言 ecmascript

于 2021-12-12 18:17:45 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/121890664

版权

js 专栏收录该内容

55 篇文章 2 订阅

订阅专栏

分析

鼠标不断地移动,需要使用鼠标移动事件 mousemove
在页面中移动,给document注册事件
图片要移动距离,而且不占位置,使用绝对定位
核心原理:每次鼠标移动,获取最新的鼠标坐标,把这个x和y坐标作为图片的top和left值就可以移动图片

代码

<html>
<head>
<meta charset="utf-8">
<title>跟随鼠标的天使</title>
	
	<style>
		img {
			position: absolute;
			top: 2px;
		}
	</style>
	
</head>

<body>
	
	<img src="image/angel.gif" alt="">
	
	<script>
		
		var pic = document.querySelector('img');
		document.addEventListener('mousemove', function(e) {
			//1.只要鼠标移动就会触发这个事件
//			console.log('aa');
			//2.每次鼠标移动,获取最新的鼠标坐标,把这个x和y坐标作为图片的top和left值就可以移动图片
			var x = e.pageX;
			var y = e.pageY;
//			console.log(x,y);
			//一定要给left top添加 px 单位
			pic.style.left = x - 30 + 'px';
			pic.style.top = y - 40 + 'px';
		})
		
	</script>
</body>
</html>

实际使用:放大镜跟随鼠标查看网页图片