Home > Article > Web Front-end > jQuery implements animated paging example with shuffling effect_jquery

jQuery implements animated paging example with shuffling effect_jquery

WBOYOriginal: 2016-05-16 15:41:361735browse

The example in this article describes jQuery’s implementation of animated paging with shuffling effect. Share it with everyone for your reference. The details are as follows:

This jquery paging example loads an LI list of images and uses jQuery technology to divide it into multiple pages for display. During the paging process, animation effects are also added to make the entire paging effect look very professional. taste.

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows:

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

I hope this article will be helpful to everyone’s jquery programming design.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jquery CSS3 implements Taobao mobile web menu effect_jqueryNext article：jquery CSS3 implements Taobao mobile web menu effect_jquery

See more

jQuery implements animated paging example with shuffling effect_jquery

Related articles