滚动列表问题 [英] scrolling list problem

问题描述

我有一个列表项，该列表项每5秒向上滚动并将列表中的第一项追加到底部，但是我的问题是，我希望整个列表滚动以获得更好的syn.该代码的演示位于此处.如果您仔细观察，只有第二，第三和第四项向上滚动...请问我该怎么做才能改善这一点?

I have a list item which scrolls up and appends the first item on the list to the bottom every 5 seconds but my the problem is that, i would like the entire list to scroll for better syn. The demo of the code is here. If you watch closely, only the 2nd, 3rd and 4th item scroll up...What can i do to improve this please?

推荐答案

第二，第三和第四项向上滚动"会发生什么?

What happens on the "the 2nd, 3rd and 4th item scroll up"?

无论如何，这是我认为是更好的版本:

Anyway, this is what I believe is a better version:

function test() {
var a= $("ul li:first-child");
    a.slideUp("slow", function(){
        a.appendTo("ul").slideDown();
    });
};
window.setInterval(test, 1000);

function test() {
var a= $("ul li:first-child");
    a.slideUp("slow", function(){
        $(this).remove();
    });
    var b = a.clone();
    b.appendTo("ul").hide().slideDown();
};
window.setInterval(test, 1000);

示例: http://jsfiddle.net/2DNV3/20/

Example: http://jsfiddle.net/2DNV3/20/

示例: http://jsfiddle.net/qsem9/

var scroll = function(){
    var first  = $("#scroll > li:eq(0)");
    var last = first.clone().appendTo("#scroll");

    $("#scroll").animate({ "scrollTop": first.outerHeight()  }, 500, function(){
        first.remove();
    });

    window.setTimeout(scroll, 1000);
};

$("#scroll").css({ height: $("#scroll").outerHeight() });

scroll();

这样，无论什么情况，您都可以无缝滚动-因为实际上是 滚动. ;)

This way, you have seamless scrolling no matter what - because it is actually scrolling. ;)

这篇关于滚动列表问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！