此案例的核心点在于如何设置跟随鼠标的移动,思路是将上一个元素的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--) 此思路为倒序,下面依次更改即可...