本文分享了一段JavaScript实现图片跟随鼠标移动的具体代码。通过监听鼠标事件并动态修改图片元素的绝对定位坐标，实现多个图片依次跟随鼠标轨迹移动的效果。代码包含HTML结构、CSS样式及核心JS逻辑，适合前端初学者参考学习。
图片跟随鼠标移动效果实现
本文提供了使用JavaScript实现图片跟随鼠标移动效果的具体代码示例，供读者参考。
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
width: 1000px;
height: 600px;
background: #cecece;
margin: 20px auto;
}
img{
width: 50px;
height: 50px;
border-radius: 50%;
background: #f00;
position: absolute;
}
</style>
</head>
<body>
<div id="box">
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
<img src="img/1.png" class="img"/>
</div>
<script type="text/javascript">
window.onload = function() {
var oBox = document.getElementById("box");
var oImg=document.getElementsByClassName("img");
oBox.onmousemove = function(e) {
var e = e || window.event;
var left = e.clientX;
var top = e.clientY;
//console.log(left, top);
//设置oImg偏移量
//oImg.style.left = left + "px";
//oImg.style.top = top + "px";
oImg[0].style.left=left + "px";
oImg[0].style.top=top + "px";
for(var i=oImg.length-1;i>0;i--){
oImg[i].style.left=oImg[i-1].style.left;
oImg[i].style.top=oImg[i-1].style.top;
}
}
}
</script>
</body>如需进一步了解JavaScript基础知识，可点击链接查看javascript入门教程专题。
希望本文的内容能对读者的学习有所帮助，同时也欢迎大家继续支持本站。