站长资讯网
本篇文章给大家介绍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>
站长资讯网
最全最丰富的资讯网站
最全最丰富的资讯网站