js实现图片跟随鼠标移动的两种方法

本篇文章给大家介绍js如何实现图片跟随鼠标移动，这里会列举两种实现方法，希望对需要的朋友有所帮助！

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

第一种

nbsp;html>

	
		<meta><title></title><style>
			img{
				position: fixed;
				left: 0px;
				top: 0px;
			}
		</style><img><script>
			var img = document.querySelector(&#39;img&#39;);
			// mousemove鼠标移动事件
			document.addEventListener(&#39;mousemove&#39;,function(e){
				var pagex = e.pageX-20+&#39;px&#39;;
				var pagey = e.pageY-20+&#39;px&#39;;
				// console.log(pagex,pagey);
				img.style.left = pagex;
				img.style.top = pagey;
			})
		</script>

第二种

nbsp;html>

	
		<meta><title></title><style>
			img{
				position: absolute;
				width: 80px;
			}
		</style><img><script>
			window.onmousemove = function(e){
				var x = e.pageX;
				var y = e.pageY;
				img.style.left = x+&#39;px&#39;;
				img.style.top = y+&#39;px&#39;;
			}
		</script>

相关推荐：【JavaScript视频教程】