Posted in Javascript onOctober 16, 2019
本文实例为大家分享了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入门教程
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
js实现图片跟随鼠标移动效果
- Author -
chen1027_11声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@