0

このページを参照してください:

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

最初の問題は、1 秒ほど後にアニメーションに「ヒックアップ」が発生することです。

2 番目の問題は、すべての画像がループされると、連続するのではなく、すぐに最初から再開されることです。これを変更する方法はありますか？

どうにかして一連の画像のクローンを作成し、それを添付する必要があると思います..

コード：

$(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

2 つの JS フィドルがあります。

最初はコードhttp://jsfiddle.net/VCBXz/12/を修正します。最初の問題は、現在のアイテムではなく、コンテナーのマージンを操作する必要があることです。次に、リストが更新されるように、DOM 内の現在のアイテムを切り離して再追加する必要があります。

2 番目のフィドルは 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 に答える