recherche

Maison >interface Web >js tutoriel >jQuery implémente un exemple de pagination animée avec shuffling effect_jquery

jQuery implémente un exemple de pagination animée avec shuffling effect_jquery

WBOY
WBOYoriginal
2016-05-16 15:41:361805parcourir

L'exemple de cet article décrit l'implémentation par jQuery d'une pagination animée avec effet de lecture aléatoire. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Cet exemple de pagination jquery charge une liste LI d'images et utilise la technologie jQuery pour la diviser en plusieurs pages à afficher. Pendant le processus de pagination, des effets d'animation sont également ajoutés pour donner à l'ensemble de l'effet de pagination un aspect très professionnel.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/jquery-list-page-flash-style-codes/

Le code spécifique est le suivant : 

<!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>

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jquery CSS3 implémente le menu Web mobile Taobao effect_jqueryArticle suivant：jquery CSS3 implémente le menu Web mobile Taobao effect_jquery

Articles Liés

Voir plus