js实现图片跟随鼠标移动的方法是什么？-群英

您现在的位置是：群英 > 开发技术 > web开发

js实现图片跟随鼠标移动的方法是什么？

Admin发表于 2022-08-31 17:26:301141 次浏览

上一篇：如何用JavaScript实现一个按键精灵？方法是什么？

下一篇： JS盒子模型的基本属性是什么？

这篇文章给大家分享的是“js实现图片跟随鼠标移动的方法是什么？”，文中的讲解内容简单清晰，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下“js实现图片跟随鼠标移动的方法是什么？”吧。

这里列举了两种实现方法：

第一种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				position: fixed;
				left: 0px;
				top: 0px;
			}
		</style>
	</head>
	<body>
		<img src="icon_2.png" >
		<script type="text/javascript">
			var img = document.querySelector('img');
			// mousemove鼠标移动事件
			document.addEventListener('mousemove',function(e){
				var pagex = e.pageX-20+'px';
				var pagey = e.pageY-20+'px';
				// console.log(pagex,pagey);
				img.style.left = pagex;
				img.style.top = pagey;
			})
		</script>
	</body>
</html>

第二种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img{
				position: absolute;
				width: 80px;
			}
		</style>
	</head>
	<body>
		<img src="皮影.jpg" id="img">
		<script type="text/javascript">
			window.onmousemove = function(e){
				var x = e.pageX;
				var y = e.pageY;
				img.style.left = x+'px';
				img.style.top = y+'px';
			}
		</script>
	</body>
</html>

以上就是关于js实现图片跟随鼠标移动的方法是什么？的介绍啦，需要的朋友可以参考上述内容，希望对大家有帮助，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： JavaScript

上一篇：如何用JavaScript实现一个按键精灵？方法是什么？

下一篇： JS盒子模型的基本属性是什么？

相关信息推荐

什么是PHP反序列化原生类，怎么实现

2022-07-26 17:49:07　

摘要：本篇文章给大家带来了关于PHP的相关知识，其中主要介绍了关于反序列化原生类的利用，如果在代码审计或者ctf中，有反序列化的功能点，但是却不能构造出完整的pop链，那这时我们应该如何破局呢，下面一起来看一下，希望对大家有帮助。

搭建我的世界服务器要满足哪些条件?

2021-10-15 16:28:28　

摘要：搭建我的世界服务器，首先要满足自己和别人联机玩mc的平台。可以一次性容纳多人，而且不需要主人在线一直后台运作。服务器是个局域网络，选择一个区去玩，在里面玩会给你带来很好多的成就感，你可以打扮自己的家，也可以开一家小店，吸引客人，让对方买你东西。