JS实现一连串元素跟随鼠标效果

效果图

思路

当鼠标移动时，获取到鼠标的位置，将第一个小球的位置设置为鼠标的位置，然后将剩余小球都设为其前一个小球的位置，这样就可以动起来了。

代码

首先建立基本HTML结构，我们使用div来做小球：

CSS

#qiu div{
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  transition: all 0.1s;
}

逻辑

首先我们获取所有的小球div，并存放在一个变量中。

var qiu = document.getElementById("qiu").children;

当鼠标移动的时候，我们需要使小球改变位置：

document.onmousemove = function (e) {}

我先我们设置第0的小球的位置，分别为鼠标当前的坐标：

qiu[0].style.left = e.pageX + "px";
qiu[0].style.top  = e.pageY + "px";

使用for循环将剩下小球的位置设置为前一个小球的位置：

for (var i = 1; i< qiu.length; i++) {
    qiu[i].style.left = qiu[i - 1].offsetLeft + "px";    
    qiu[i].style.top  = qiu[i - 1].offsetTop  + "px";
}

完整代码：