js案例：跟随鼠标移动的大虫子

目录

效果预览图

整体思路

完整代码 

---

效果预览图

整体思路

1. rang 函数用于生成指定范围内的随机整数。

2. 通过循环，创建了50个div元素，每个div都有一个不同的数字和随机的背景颜色。

3. 给每个div元素添加了名为 "ball" 的类名。

4. 通过 document.querySelectorAll('.ball') 获取所有具有 "ball" 类名的元素，然后将它们存储在 divs 变量中。

5. 给 divs 中的最后一个元素（第50个div）添加了 mousedown 事件处理程序。当鼠标按下时，获取鼠标相对于该div的偏移，并添加 mousemove 事件处理程序，以便在移动鼠标时更新该div的位置，从而实现拖动效果。

6. 给 document 添加了 mouseup 事件处理程序。当鼠标抬起时，通过 setInterval 定时器，定期更新除了最后一个div之外的所有div的位置，实现了动画效果。同时，清除了之前设置的 mousemove 事件处理程序。

      7.div元素跟随鼠标移动，而其余的div元素则以一定的速度向前移动，形成动画效果。

完整代码