0

例として次のフィドルを作成しました: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);
4

1 に答える 1

3

これは主に、一部のtopsをbottomsに変更し、増分を減分に変更することなどで構成されます。

これでうまくいくはずですhttp://jsfiddle.net/GR7pg/16/

于 2012-11-09T21:57:42.463 に答える