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>

Code 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

让我们从为什么它太随机开始吧。首先，每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_pixels和y_pixels。你在上面声明了这个：

var x_pixels = 0,
y_pixels = 0;

但是那时你还没有从点中获取当前值。您可以通过+ =回收它们，但每个点共享相同的位置。

我有两个解决方案，因为这个问题相当广泛，可以通过多种方式进行解释。这两种解决方案都通过指定与点保持一致的摩擦系数来解决上面列出的问题。第一个例子保持点的寿命随机摩擦，第二个例子经常改变摩擦系数。

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

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

干杯！

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

1 个答案: