一連串跟隨滑鼠移動的元素
阿新 • • 發佈:2021-01-07
此案例的核心點在於如何設定跟隨滑鼠的移動,思路是將上一個元素的offsetLeft/Top值賦值給下一個元素的left/top,將最後一個div的left/top值直接找滑鼠的位置
以下為html結構
<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
以下給div設定樣式
<style> *{margin:0;padding: 0;} div{ width:10px; height:10px; border-radius: 50%; background: black; /* 重點:這裡將div設定了絕對定位 */ position: absolute; } </style>
以下為js部分
<script> var adiv=document.querySelectorAll('div'); document.onmousemove=function(eve){ var e=eve||window.event; for(var i=0;i<adiv.length-1;i++){ //重點:將上一個元素的offsetLeft/Top值賦值給下一個元素的left/top adiv[i].style.left=adiv[i+1].offsetLeft+'px'; adiv[i].style.top=adiv[i+1].offsetTop+'px'; } //重點:將最後一個div的left/top值找滑鼠的位置 adiv[adiv.length-1].style.left=e.pageX+'px'; adiv[adiv.length-1].style.top=e.pageY+'px'; } </script>
期間有遇到朋友在寫迴圈的時候,for(var i=adiv.length-1;i--) 此思路為倒序,下面依次更改即可...