本文实例为大家分享了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入门教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:notice#nhooo.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。