js实现图片跟随鼠标移动效果

时间：2021-05-26

本文实例为大家分享了js实现图片跟随鼠标移动效果的具体代码，供大家参考，具体内容如下

<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入门教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章