本文實例講述了jQuery實現(xiàn)帶有洗牌效果的動畫分頁。分享給大家供大家參考。具體如下：
這款jquery分頁示例載入的是一個圖片的LI列表，使用jQuery技術(shù)將其分為多頁顯示，在分頁的過程中，還加入了動畫效果，使整個分頁效果看上去很有專業(yè)味。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/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>無標(biāo)題文檔</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程序設(shè)計有所幫助。
新聞熱點
疑難解答
