这个效果在很多论坛,贴吧上应用,我给整理了下,将最简单的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>