ホームページ > 記事 > ウェブフロントエンド > jsを使用してマウスの動きに追従する画像を実装する2つの方法
jsを使用してマウスの動きに追従する画像を実装する2つの方法
- 藏色散人転載
- 2022-08-07 10:09:153481ブラウズ
#ここに 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 サイトの他の関連記事を参照してください。
声明：
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。