js實現圖片跟隨滑鼠移動效果
阿新 • • 發佈:2020-11-27
本文例項為大家分享了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入門教程
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援碼農教程。