Jquery 使用最新提要向下滚动框

我浏览了以下三个网站：

如您所见，主页上有一个向下滚动的“最新活动”框。 我如何创建这样的东西

---

这是jquery还是什么？

它是用javascript完成的，您可以使用jquery让自己更轻松。这里有一个简单的例子

$（函数（）{
setInterval（函数（）{
$（“#包装器”）.prepend（$（“
一个新项目
”）.hide（）.fadeIn（））；
}, 4000); 
});

---

您可以使用超时或间隔，再加上ajax请求，轮询数据库并返回新结果等。基本概念只是将新项附加到dom树。

除了Loktar的版本之外，这更类似于4square：

var newitem=function（）{
变量项=$（''）
.addClass（“项”）
.css（'display'，'none'）
.text（'这是一个全新的项目'）
.prependTo（“#滚动条”）
.slideDown（）；
$（'#scroller.item:last'）。动画（{height:'0px'}，function（）{
$（this.remove（）；
});
}
设置间隔（newitem，2000）；

这很酷，所以你必须设计所有东西，例如：盒子等等。。。文本是否来自数据库？内容可能来自任何地方，例如数据库或其他网页，如twitter的实时订阅源。事实上，这里有一个，这里有一整页，看起来很像4square。

$(function(){
    setInterval(function(){
                  $("#wrapper").prepend($("<li>A new item</li>").hide().fadeIn());
    }, 4000); 
});

var newitem = function(){
    var item = $('<div>')
        .addClass('item')
        .css('display','none')
        .text('This is a brand new item')
        .prependTo('#scroller')
        .slideDown();
    $('#scroller .item:last').animate({height:'0px'},function(){
        $(this).remove();
    });
}

setInterval(newitem, 2000);