jQuery百葉窗翻牌效果代碼

2024-09-05 12:18:25

字體：大中小

供稿：網(wǎng)友

jQuery百葉窗翻牌效果代碼，其實也就是文字切換，采用了百葉窗的方式，在原理上，每隔三秒執(zhí)行一次變換LI的內(nèi)容，LI變換的方式，即每隔100ms，讓下一個LI移動top值;所有的LI移動完畢，就清除，依次類推，實現(xiàn)循環(huán)切換，形似百葉窗。

<!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; //執(zhí)行向上或向下的開關(guān)	var liindex = 0;//LI的索引	var $div = $(".byc").find("div");		//每隔三秒執(zhí)行一次變換LI的內(nèi)容    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   id="iwvjtn8m0"   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空間裝扮預(yù)覽圖片的鼠標提示效果