この記事では、js でマウスの動きを追跡する画像を実装する方法を紹介します。 2 つの実装方法が必要な友人の役に立てば幸いです。
ここでは 2 つの実装方法を示します。
最初の
<!DOCTYPE html>
<html>
<頭>
<meta charset="utf-8">
<タイトル></タイトル>
<style type="text/css">
画像{
位置: 固定;
左: 0px;
上: 0px;
}
</スタイル>
</head>
<本文>
<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 = ページx;
img.style.top = ページ;
})
</script>
</body>
</html>
2 番目のタイプ
<!DOCTYPE html>
<html>
<頭>
<meta charset="utf-8">
<タイトル></タイトル>
<style type="text/css">
画像{
位置: 絶対;
幅: 80ピクセル;
}
</スタイル>
</head>
<本文>
<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 サイトの他の関連記事に注目してください。
