Das Beispiel in diesem Artikel beschreibt die jQuery-Implementierung von animiertem Paging mit Shuffling-Effekt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dieses JQuery-Paging-Beispiel lädt eine LI-Liste von Bildern und teilt sie mithilfe der JQuery-Technologie zur Anzeige in mehrere Seiten auf. Während des Paging-Vorgangs werden auch Animationseffekte hinzugefügt, um dem gesamten Paging-Effekt ein sehr professionelles Aussehen zu verleihen.
Der Screenshot des Laufeffekts sieht wie folgt aus:
Die Online-Demo-Adresse lautet wie folgt:
http://demo.jb51.net/js/2015/jquery-list-page-flash-style-codes/
Der spezifische Code lautet wie folgt:
<!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>Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.
