jQuery新闻列表动态显示效果

345161974

浏览: 58715 次
性别:
来自: 上海

最近访客更多访客>>

mr891127

侯庆忠

chrisisgoodegg

lovehong123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端

jQuery CSS 算法 JavaScript IDEA

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

demo.rar (19.8 KB)
下载次数: 94