Обратное направление вертикального тикера новостей

Я сделал следующую скрипку в качестве примера: 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);

1 ответ

Решение

Это в основном состоит из изменения некоторых из topс bottoms и изменение приращений на уменьшение и т. д.

Это должно сделать это http://jsfiddle.net/GR7pg/16/

Другие вопросы по тегам