例として次のフィドルを作成しました:http://jsfiddle.net/GR7pg/ですが、上ではなく下に移動する必要があります。
基本的に何が起こったのかというと、私はこれを数週間作成し、クライアントに配信したときに、ティッカーを上向きではなく下向きに移動させたいと考えています。
一番上のアイテムを下に移動してから消えることができましたが、残りのアイテムはまだ上に移動しました。jqueryに精通している人なら、これを簡単に変更できると思いますか?しかし、私はあらゆる種類の微調整を試みましたが、その結果、奇妙な動作が発生しました。
どんな助けでも大歓迎です!ありがとう
(function ($) {
$.fn.extend({
vscroller: function (options) {
var settings = $.extend({ speed: 1000, stay: 4000, newsfeed: '', cache: true }, options);
return this.each(function () {
var interval = null;
var mouseIn = false;
var totalElements;
var isScrolling = false;
var h;
var t;
var wrapper = $('.news-wrapper');
var newsContents = $('.news-contents');
var i = 0;
totalElements = $.find('.news').length;
h = parseFloat($('.news:eq(0)').outerHeight());
$('.news', wrapper).each(function () {
$(this).css({ top: i++ * h });
});
t = (totalElements - 1) * h;
newsContents.mouseenter(function () {
mouseIn = true;
if (!isScrolling) {
$('.news').stop(true, false);
clearTimeout(interval);
}
});
newsContents.mouseleave(function () {
mouseIn = false;
interval = setTimeout(scroll, settings.stay);
});
interval = setTimeout(scroll, 1);
function scroll() {
if (!mouseIn && !isScrolling) {
isScrolling = true;
$('.news:eq(0)').stop(true, false).animate({ top: -h }, settings.speed, function () {
clearTimeout(interval);
var current = $('.news:eq(0)').clone(true);
current.css({ top: t });
$('.news-contents').append(current);
$('.news:eq(0)').remove();
isScrolling = false;
interval = setTimeout(scroll, settings.stay);
});
$('.news:gt(0)').stop(true, false).animate({ top: '-=' + h }, settings.speed);
}
}
});
}
});
})(jQuery);