javascript - Jquery 动画 - 循环 div

Question

大家好，我遇到了循环这些 div 的问题。

当第一个 div 离开屏幕时，我希望它跳回到屏幕的开头并再次开始循环。这是 jsfiddle .

我也有这个功能，我认为应该可以，但它什么也没做/我做错了什么哈哈。

var boxes = $('#inner>div');
var speeds = [
0.5, 0.5, 0.35, 0.45, 0.46, 0.55, 0.5, 0.5
];

function update() {
  var width = $('#wrapper').width;

  // update boxes
  for (var i = 0; i < boxes.length; i++) {
    var box = boxes[i];
    var speed = speeds[i];

    box.left -= speed;

    if (box.left < -box.width) {
      cloud.left = width;
    }
  };
  window.setTimeout(update, 2000);
};

Answer 1

你会希望你的计时器比每 2000 毫秒运行一次更快，我将其更改为每 20 毫秒运行一次。此解决方案基于使用 position: absolute; 并更改 div 的 left 属性。

您可以在此处进行的一些性能改进是存储 div 的宽度和窗口的宽度，这样您就不必在每个循环中重新计算这些值。

如果你想加快 div 的速度，你可以让计时器更快(更多的 cpu 负载)或者你可以增加速度数组中的值(没有太大的性能影响，可能看起来不那么流畅)

var boxes = $('#inner>div');
var speeds = [
0.5, 0.5, 0.35, 0.45, 0.46, 0.55, 0.5, 0.5
];

function update() {
  var width = $('#wrapper').width;

  // update boxes
  for (var i = 0; i < boxes.length; i++) {
    var box = $(boxes[i]);
    var speed = speeds[i];
    var leftPos = box.position().left;
    box.css({left: leftPos + speed});

    if (leftPos + box.width() > $(window).width()) {
      box.css({left: 0});
    }
  };
  window.setTimeout(update, 20);
};

$('#inner>div').each(function(i){
    $(this).css('top', i * 50);
});

update();

fiddle : https://jsfiddle.net/u160Lg3h/