0

请参阅此页面：

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

第一个问题是动画在一秒钟左右后出现“打嗝”。

第二个问题是，一旦所有图像都被循环，它会立即从顶部重新开始，而不是连续的。有什么办法可以改变这个吗？

我想我需要以某种方式克隆一组图像并将其附加..

编码：

$(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"));
  });
});
4

1 回答 1

2

我有两个 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"));
});​
于 2012-02-18T12:10:28.680 回答