jQuery百叶窗翻牌效果代码

2024-09-05 12:18:25

字体：大中小

来源：转载

供稿：网友

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>

上一篇：Js照片墙实例演示,可拖动换位置，可随机排序

下一篇：仿QQ空间装扮预览图片的鼠标提示效果

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注