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

时间：2021-05-26

本文实例讲述了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程序设计有所帮助。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章