#ここに 2 つの実装方法があります:この記事では、マウスの動きに追従する画像を実装するための js の実装方法を紹介します。実装方法は 2 つあります。困っている友人の役に立てば幸いです。
最初の方法
<!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>
2 番目のタイプ
<!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>
関連する推奨事項: [JavaScript ビデオ チュートリアル ]
以上がjsを使用してマウスの動きに追従する画像を実装する2つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。