本文实例讲述了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,{left:360,{left:100,{left:880,top:220},top:30},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},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,$(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程序设计有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。