jQuery实现带有洗牌效果的动画分页实例

本文实例讲述了jQuery实现带有洗牌效果的动画分页。分享给大家供大家参考。具体如下：
这款jquery分页示例载入的是一个图片的LI列表，使用jQuery技术将其分为多页显示，在分页的过程中，还加入了动画效果，使整个分页效果看上去很有专业味。
运行效果截图如下：

在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-list-page-flash-style-codes/
具体代码如下：

<！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="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><body><div id="wrapBox"> <ul id="firstPage"> <li> <img src="images/wall_s1.jpg" /> </li> <li> <img src="images/wall_s1.jpg" /> </li><li> <img src="images/wall_s1.jpg" /> </li> <li> <img src="images/wall_s1.jpg" /> </li> <li> <img src="images/wall_s1.jpg" /> </li> <li> <img src="images/wall_s1.jpg" /> </li> <li> <img src="images/wall_s1.jpg" /> </li> <li> <img src="images/wall_s1.jpg" /> </li> <li> <img src="images/wall_s1.jpg" /> </li> <li> <img src="images/wall_s1.jpg" /> </li> <li> <img src="images/wall_s1.jpg" /> </li> <li> <img src="images/wall_s1.jpg" /> </li> <li> <img src="images/wall_s1.jpg" /> </li> <li> <img src="images/wall_s1.jpg" /> </li> <li> <img src="images/wall_s1.jpg" /> </li> </ul> <div id="button"> <button type="button">1</button> <button type="button">2</button> </div></div></body></html>

希望本文所述对大家的jquery程序设计有所帮助。