Jquery 多个div以可变速度跟随光标

我做了一些关于如何让一个div/图形跟随光标的研究——我试图为多个div创建这种效果，其中每个div都有自己的随机速度，其中一些元素落后于其他元素。我已经创建了一个JS提琴来显示当前的进展，你可以看到它在某种程度上起了作用。但我希望能取得比现在更为戏剧性的效果

代码HTML

<div class="container">
  <div class="following blue"></div>
  <div class="following red"></div>
  <div class="following yellow"></div>
  <div class="following orange"></div>
  <div class="following green"></div>
  <div class="following purple"></div>
  <div class="following pink"></div>
</div>

---

对于如何做到这一点，任何建议都将不胜感激。谢谢

让我们从为什么不太随机开始。首先，每40ms对每个点进行一次计算。这有着有趣的结果

x_pixels += (mouseX - x_pixels) / randomIntFromInterval(min, max);
y_pixels += (mouseY - y_pixels) / randomIntFromInterval(min, max);

假设蓝点得到一组随机数{1,4,7,8,4,3,10,6,6}，红点得到一组随机数{8,7,5,4,5,7,9,4,3}。问题是这些平均值将是相同的（分别为5.44和5.77）。因为这些动作发生得很快，它们有一点抖动，但它们更大的动作往往是相同的

第二个问题是，每个点使用相同的x_像素和y_像素。您在顶部声明：

var x_pixels = 0,
y_pixels = 0;

但是你永远不会从圆点得到当前值。通过+=循环它们，但每个点共享相同的位置

我有两个解决方案，因为这个问题相当广泛，可以用多种方式来解释。这两种解决方案都通过指定与圆点保持一致的摩擦系数来解决上述问题。第一个示例在圆点的使用寿命内保持随机摩擦，第二个示例每隔一段时间更改摩擦系数

-第一种解决方案

-第二种解决方案

---

干杯

你所说的更具戏剧性的效果是什么意思？因此，其中一个“跟随者”可能比另一个跟随光标的延迟更长。在提供的js fiddle中，您可以看到它们以不同的速度跟踪，但它们仍然非常相似。我希望每次延误都有更大的差别。这有助于回答你的问题吗？@JordanS-你对此有什么建议吗？每个点都应该有一个恒定的速度吗？例如，蓝点总是比粉红点慢例如，我非常感谢你花时间解释为什么它不起作用。这正是我想要达到的。非常感谢！您知道您提供的示例在Safari中不起作用的原因吗？我有

console.log（x_像素）

，在Chrome中它返回一个

值

，而在Safari中它返回的是

NaN

。我想知道这是为什么？

var x_pixels = 0,
y_pixels = 0;