这个效果在很多论坛，贴吧上应用，我给整理了下，将最简单的demo做出，仅作札记学习备用。
效果图如下：
只显示3(可控制)个，每条新闻动态下落
均测试过：兼容IE6、7、8，FF。
源代码如下：
引入jQuery.js；
其中text.js如下
$(function(){
var t = 2000 ;
var g = 0 ;
//k定义显示多少条
var k = 3 ;
var j = 0 ;
//将所有的显示条都隐藏了
$("div#tw_rec").find("div.twi").hide() ;
//通过找到的长度,遍历赋予id值
var l = h = $("div#tw_rec").find("div.twi").length ;
$("div#tw_rec").find("div.twi").each(function(){
l-- ;
$(this).attr("id","recent"+l) ;
}) ;
//控制,只有id为recent0,recent1的可以显示
for(var i=0;i<k;i++){
$("#recent"+i).show() ;
}
//每过4秒执行一次a函数
setTimeout(a,t) ;
function a(){
//小的算法,从基数k开始累加与总长度取模,得到该显示的下一条,可以轮回，i只取0、1、2、3...到h的数值
var i = (g+k)%h ;
//给即将显示的加上动画
$("#recent"+i).css("height","1px").animate({height:"18px"},1000,b(g)) ;
g = (g+1)%h ;
setTimeout(a,t) ;
}
function b(k){
return function(){
$("#recent"+k).remove().css("display","none").prependTo("div#tw_rec")
}
}
}) ;
testdown.html如下
<html>
<head>
<title>手写落幕</title>
<script type="text/javascript" src="jquery.js"></script>
<script src="text.js"></script>
<style>
#tw_rec{
height:54px ;
overflow:hidden ;
}
</style>
</head>
<body>
<div id="tw_rec">
<div class="twi">
这个是第4个
</div>
<div class="twi">
这个是第3个
</div>
<div class="twi">
这个是第2个
</div>
<div class="twi">
这个是第1个,注:每个DIV的高度是18px
</div>
</div>
</body>
</html>
