jQuery快讯列表动态显示效果
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 class="twi"> 这个是第4个 </div> <div class="twi"> 这个是第3个 </div> <div class="twi"> 这个是第2个 </div> <div class="twi"> 这个是第1个,注:每个DIV的高度是18px </div> </div> </body> </html>
1 楼
天涯游之
2010-12-01