站長資訊網(wǎng)
本篇文章給大家介紹js如何實現(xiàn)圖片跟隨鼠標移動，這里會列舉兩種實現(xiàn)方法，希望對需要的朋友有所幫助！ 這里列舉了兩種實現(xiàn)方法： 第一種 第二種
<!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>
站長資訊網(wǎng)
最全最豐富的資訊網(wǎng)站
最全最豐富的資訊網(wǎng)站
