I made the following fiddle as an example: http://jsfiddle.net/GR7pg/ but need it to move downwards instead of up.

Basically what happened is I made all this for weeks and then when I delivered to the client, they now want the ticker to move downwards instead of upwards.

I was able to get the top item to move down and then disappear but then the rest of the items moved up still. Someone who is more familiar with jquery could change this easily I would hope? But me I have tried all sorts of tweaks which resulted in strange behavior.

Any help greatly appreciated! THanks

(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);
有帮助吗?

解决方案

It mostly consists of changing some of the tops to bottoms and changing increments to decrements, etc.

This should do it http://jsfiddle.net/GR7pg/16/

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top