多个 Div 以可变速度跟随光标

Question

我已经研究了如何让 div/graphic 跟随光标 - Resource Here - 我正在尝试为多个 div 创建这种效果，其中每个 div 有它自己的随机速度，其中一些元素比其他元素落后更多。我已经创建了一个 JS Fiddle 来显示当前的进度，您可以看到它在某种程度上是有效的。但我希望能达到比现在更戏剧化的效果。

JS Fiddle

代码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>

代码JS

var mouseX = 0,
    mouseY = 0,
    limitX = 400 - 15,
    limitY = 550 - 15;

$(window).mousemove(function(e) {
    // with the math subtractnig the boundary  
    mouseX = Math.min(e.pageX, limitX);
    mouseY = Math.min(e.pageY, limitY);
});

// cache the selector
var followers = $(".following");
var x_pixels = 0,
    y_pixels = 0;
var loop = setInterval(function() {

    // Loop through each follower to move and have random speeds
    followers.each(function() {
      // Set a max Number to allow for the randomIntFromInterval
      // function to work
      var max = followers.length * 15;
      var min = followers.length;

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

    $(this).css({
      left: x_pixels,
      top: y_pixels
    });

  });

 }, 40);

function randomIntFromInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

非常感谢任何有关如何执行此操作的建议。谢谢！

Answer 1

让我们从为什么它不是太随机开始。首先，这些计算是每 40 毫秒对每个点进行运行。这会产生有趣的后果。

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_pixels 和 y_pixels。您在顶部声明：

var x_pixels = 0,
y_pixels = 0;

但是你永远不会从点中取回当前值。您通过 += 回收它们，但每个点共享相同的位置。

我为您提供了两个解决方案，因为这个问题相当广泛，可以用多种方式解释。这两种解决方案都通过分配与点保持一致的摩擦系数来解决上面列出的问题。第一个例子在点的生命周期内保持随机摩擦，第二个例子每隔一段时间改变摩擦系数。

jsfiddle.net/e3495jmj/1 - 第一个解决方案

jsfiddle.net/e3495jmj/2 - 第二个解决方案

干杯！

多个 Div 以可变速度跟随光标

Multiple Divs follow cursor all with variable speeds

jquery

loops

move

cursor