JS實現圖片隨著滑鼠自由移動
阿新 • • 發佈：2018-11-19
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> img { position: absolute; } </style> </head> <body> <img src="images/tianshi.gif" id="im" alt="" /> <script src="js/common.js"></script> <script> document.documentElement.onmousemove=function(e){ //console.log(e); //利用clientX和clientY來設定圖片的位置也就是滑鼠的位置 my$('im').style.left=e.clientX-40+'px'; my$('im').style.top=e.clientY-40+'px'; }; </script> </body> </html>
最終效果如上圖，圖片可以在頁面隨著滑鼠自由移動。
