如何使这个连续垂直卷轴？ （jquery的）

Question

参见本页：

http://www.laurensbeerten.be/Frames/FrameE.html

第一个问题是动画在一秒左右后会出现“hickup”。

第二个问题是，一旦所有图像都已循环播放，它会立即再次从顶部开始，而不是连续播放。有没有办法改变这个？

我想我需要以某种方式克隆一组图像并附上那个......

代码：

$(function() {
  var ticker = $('#ticker');
  function animator(currentItem, first) {                              
    if (first) {
      distance = 85;
    } else {
      distance = currentItem.outerHeight();
    }
    duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.05;
    if (isNaN(duration)) {
      duration = 1200;
    }
    currentItem.animate({ marginTop: -distance}, duration, "linear", function() {
      currentItem.appendTo(currentItem.parent()).css("marginTop", 0);
      animator(currentItem.parent().children(":first"));
    });
  };
  animator(ticker.children(":first"), true);
  ticker.mouseenter(function() {
    ticker.children().stop();
  });
  ticker.mouseleave(function() {
    animator(ticker.children(":first"));
  });
});

Answer 1

我有两个JS小提琴手。

第一个修复了您的代码http://jsfiddle.net/VCBXz/12/。第一个问题是你需要操纵容器的边距而不是当前项。其次，您需要分离并重新附加DOM中的当前项，以便更新列表。

第二个小提琴是使用CSS3 http://jsfiddle.net/ca7Ef/4/。这种方式不涉及代码。浏览器支持可能不如jquery，但需要考虑。

这是更新的JavaScript。请注意，我将内部p标记更改为div。

var ticker = $('#ticker');
var container = $('#ticker > div');
var spacing = ticker.outerHeight() - ticker.height();

function animator(currentItem) {
    var distance = currentItem.outerHeight() + spacing;
    var currentTop = parseInt(container.css('margin-top'), 10);
    var duration = (distance + currentTop) / 0.05;

    container.animate({ marginTop: -distance}, duration, "linear", function() {
        var parent = currentItem.parent();

        currentItem.detach();
        parent.css("marginTop", 5);

        parent.append(currentItem);
        animator(parent.children(":first"));
    });
};


animator(container.children(":first"));
ticker.mouseenter(function() {
    container.stop();
});

ticker.mouseleave(function() {
    animator(container.children(":first"));
});​