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();

小提琴： https://jsfiddle.net/u160Lg3h/

Jquery动画 - 循环div

1 个答案: