jQuery百叶窗翻牌效果代码 -

chunzhisu

浏览: 12617 次
性别:

最近访客更多访客>>

ptkr

yaweja

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery百叶窗翻牌效果代码

jQuery百叶窗翻牌效果代码，其实也就是文字切换，采用了百叶窗的方式，在原理上，每隔三秒执行一次变换LI的内容，LI变换的方式，即每隔100ms，让下一个LI移动top值;所有的LI移动完毕，就清除，依次类推，实现循环切换，形似百叶窗。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery百叶窗翻牌效果代码</title>
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(function(){
	var timer = true; //执行向上或向下的开关
	var liindex = 0;//LI的索引
	var $div = $(".byc").find("div");	
	//每隔三秒执行一次变换LI的内容
    var set1 = setInterval(function(){
	ainbyc($div);
	liindex = 0;
	timer = !timer;
	},3000);
	//LI变换的方式，即每隔100ms，让下一个LI移动top值;
	function ainbyc(ds){
		var set2 = setInterval(function(){
			//所有的LI移动完毕，就清除
		  if(liindex == $div.length){
			clearInterval(set2);
			//向上
		  }else if(timer){
			ds.eq(liindex).animate({"top":0},100);
			//向下
		  }else{
			ds.eq(liindex).animate({"top":-25},100);
		  }
		  liindex++;
		},100);		
	}	
})
</script>
<style type="text/css">

*{
	margin:0;
	padding:0;
	}
.box{
	width:500px;
	margin:0 auto;
	}
ul.byc{
	list-style:none;
	}
ul.byc li{
	position:relative;
	width:180px;
	height:30px;
	overflow:hidden;
	border-bottom:1px #000000 dotted;
	}
	
ul.byc li div{
	position:absolute;
	top:-25px;
	}
	
ul.byc li div p{
	height:30px;}
</style>
</head>
<body>
<div class="box">
  <ul class="byc">
  	<li>
  		<div>
  			<p>aaaaaaaaaaaaaaa</p>
  			<p>bbbbbbbbbbbbbbb</p>
  		</div>
  	</li>
  	<li>
  		<div>
  			<p>cccccccccccccc</p>
  			<p>dddddddddddddd</p>
  		</div>
  	</li>
  	<li>
  		<div>
  			<p>eeeeeeeeeeeeee</p>
  			<p>ffffffffffffff</p>
  		</div>
  	</li>
  	<li>
  		<div>
  			<p>ggggggggggggg</p>
  			<p>hhhhhhhhhhhhh</p>
  		</div>
  	</li>
  	<li>
  		<div>
  			<p>jjjjjjjjjjjjj</p>
  			<p>kkkkkkkkkkkkk</p>
  		</div>
  	</li>
  	<li>
  		<div>
  			<p>llllllllllll</p>
  			<p>mmmmmmmmmmmm</p>
  		</div>
  	</li>
  </ul>
</div>
</body>
</html>

分享到：