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

效果图

思路

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

代码

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

<div id="qiu">
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </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";
}

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #qiu div{
            width: 8px;
            height: 8px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            transition: all 0.1s;
        }
    </style>
</head>
<body>
    <div id="qiu">
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
    <script>
        var qiu = document.getElementById("qiu").children;
        document.onmousemove = function (e) {
            var e = e || event;
            qiu[0].style.left = e.pageX + "px";
            qiu[0].style.top  = e.pageY + "px";
            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";
            }
        }
    </script>
</body>
</html>

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

思路

代码

逻辑

完整代码：

推荐阅读更多精彩内容