当前位置：首页 > 网页特效 > 图片特效 >

jQuery分页，动画效果

时间：2013-04-01 21:37 来源：互联网作者：源码搜藏收藏推荐

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery分页</title>
<style>
html,body,div,ul,li,img,button{
padding:0;
margin:0;
}
body{
background:#333;
}
img{
	width:150px;
	height:150px;
	outline:none;
	margin:5px;
	vertical-align:middle;
}
#wrapBox{
	width:1150px;
	height:630px;
	border:1px solid #000;
	background:#E7E7E7;
	margin:30px 0 0 65px;
	position:relative;
}
ul{
	position:relative;
}
ul li{
	width:160px;
	height:160px;
	list-style:none;
	position:absolute;
	background:#FFF;
}
#button{
	position:absolute;
	left:525px;
	top:580px;
}
#button button{
	width:43px;
	height:43px;
	background:url('') no-repeat 2px;
	cursor:pointer;
	color:#666;
	font-weight:bolder;
	font-size:larger;
	border:none;
}
#button button.click{
	color:#A80000;
}
</style>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
	$('li').each(function(index)
	 {
		 if(index < 12)
		 {
			 
			 if(index % 4 == 0) $(this).css('left', 100 + 'px');
			 if(index % 4 == 1) $(this).css('left', 360 + 'px');
			 if(index % 4 == 2) $(this).css('left', 620 +'px');
			 if(index % 4 == 3) $(this).css('left', 880 + 'px');
			 if(index < 4) $(this).css('top', 30 + 'px');
			 if(4 <= index && index < 8) $(this).css('top', 220 + 'px');
			 if(8 <= index && index < 12) $(this).css('top', 410 + 'px');
		 }
		 else
		 {
			 $(this).css({'left':500 + 'px', 'top':500 + 'px', 'opacity':0});
			 
		 }
	 });
	 var position = [
		 
		 {left:880, top:410},
		 
		 {left:620, top:410},
		  
		 {left:360, top:410},
		 
		 {left:100, top:410},
		 
		 {left:880, top:220},
		 
		 {left:620, top:220},
		 
		 {left:360, top:220},
		 
		 {left:100, top:220},
		 
		 {left:880, top:30},
		 
		 {left:620, top:30},
		 
		 {left:360, top:30},
		 
		 {left:100, top:30}
		 
		 ];
	 
	 var animation = function(nStart, nEnd, _this)
	 
	 {
		 
		 var i = 1;
		 
		 var bStop = false;
		 
		 $(_this).attr('disabled', 'disabled');
		 
		 (function hide()
		 
		 {
			 
			 $('li').eq(nStart - i).animate({left:500 + 'px', top:500 + 'px', opacity:0}, 'fast', function()
			 
			 {
				
				 if(i == 12) 
				 
				 {
				 
				    bStop = true;
					
					(function show()
					
					{
						
						i++;
						
						$('li').eq(nStart + nEnd - i).animate({left:position[i - 13].left + 'px', top:position[i - 13].top + 'px', opacity:1},
						                           
						'fast',  function()
						
						         {
																 
									 if(i < 24) show(); 
									 
									 if(i == 24) $(_this).removeAttr('disabled');
									 
								 });
								 
					})();
					
				 }
			 
			  			 
			     if(!bStop) 
				 
				 {
					 
					i++;
					
				    hide();
					 
				 }
				 
			 });
		 
		 })();
			 
	 };
	 
	 $('button:eq(0)').addClass('click').click(function()
	 
	 {
		 
		 if($(this).is('.click')) return;
		 
		 $(this).addClass('click').siblings().removeClass();
		 
		 animation(24, 0, $(this).siblings());
		 
	 });
	 
	 $('button:eq(1)').click(function()
	 
	 {
		 
		 if($(this).is('.click')) return;
		 
		 $(this).addClass('click').siblings().removeClass();
		 
		 animation(12, 24, $(this).siblings());
		 
	 });

});

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

jquery分页，示例载入的是一个图片的LI列表，使用jQuery技术将其分为多页显示，在分页的过程中，还加入了动画效果，使整个分页效果看上去很有专业味。由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-pic/1025.html