jQuery新闻列表动态显示效果
这个效果在很多论坛，贴吧上应用，我给整理了下，将最简单的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 />