js 圖片跟隨滑鼠移動效果 案例
阿新 • • 發佈：2021-11-21
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img{ position: absolute;/*因為跟著滑鼠移動，不佔用位置，所以使用絕對定位*/ } </style> </head> <body> <img src="./images/tianshi.jpg" alt=""> <script> var pic = document.querySelector('img') document.addEventListener('mousemove',function(e){ //1.mousemove 只要滑鼠移動1px 就會除服事件//2.核心原理：每次滑鼠移動，我們都會獲取最新的滑鼠座標，把這個x和y座標作為圖片的top和left值 //就可以移動圖片了 var x = e.pageX; var y= e.pageY; //page返回的是從可以滾動條的最頂端開始到滑鼠點選Y軸的座標 ie9+以上支援 最常用 console.log(x,y) pic.style.left=x + 'px'; //注意一定要增加單位 pic.style.top=y + 'px'; })</script> </body> </html>