这篇文章主要为大家详细介绍了js实现图片跟随鼠标移动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> <img src="https://www.jb51.net/img/1.png"/> </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入门教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: