jQuery实现带有洗牌效果的动画分页实例
更新时间：2026-04-09 16:16:37作者：yezheng
本文实例讲述了jQuery实现带有洗牌效果的动画分页。分享给大家供大家参考。具体如下：
这款jquery分页示例载入的是一个图片的LI列表，使用jQuery技术将其分为多页显示，在分页的过程中，还加入了动画效果，使整个分页效果看上去很有专业味。
运行效果截图如下：
具体代码如下：
<!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程序设计有所帮助。
