jQuery实现带有洗牌效果的动画分页实例

更新时间：2015年08月31日 09:34:21 作者：企鹅

这篇文章主要介绍了jQuery实现带有洗牌效果的动画分页,涉及jquery页面元素样式及animate方法的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了jQuery实现带有洗牌效果的动画分页。分享给大家供大家参考。具体如下：

这款jquery分页示例载入的是一个图片的LI列表，使用jQuery技术将其分为多页显示，在分页的过程中，还加入了动画效果，使整个分页效果看上去很有专业味。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/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>无标题文档</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程序设计有所帮助。

您可能感兴趣的文章:

jQuery中的关系查找方法
这篇文章主要介绍了jQuery中的关系查找方法，关系查找方法分有children()子级、siblings()兄弟的一些方式，下文都有介绍到，文章内容介绍详细，需要的小伙伴可以参考一下，希望对你的学习有所帮助
2022-03-03
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
这篇文章主要帮助大家轻松学习jQuery插件EasyUI，EasyUI创建树形菜单，内容很丰富，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-11-11
javascript与jquery中跳出循环的区别总结
本文是对javascript与jquery中跳出循环的区别进行了详细的总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-11-11
jquery简单图片切换显示效果实现方法
这篇文章主要介绍了jquery简单图片切换显示效果实现方法,可以实现简单的图片切换功能,具有一定参考借鉴价值,需要的朋友可以参考下
2015-01-01
jQuery实现弹出窗口中切换登录与注册表单
本文给大家推荐的是一款jQuery实现弹出窗口中切换登录与注册表单的特效。适用浏览器：IE8+、FireFox、Chrome、Safari、Opera。十分的方便实用，有需要的小伙伴可以参考下。
2015-06-06
jQuery阻止同类型事件小结
事件追加：点击green元素会依次执行green click1、green click2两个事件（同一元素的同类型事件），感兴趣的朋友可以参考下哈
2013-04-04
JQuery一种取同级值的方式(比如你在GridView中)
JQuery一种取同级值的方式比如你在GridView中,实现代码如下，需要的朋友可以参考下
2012-03-03
Bootstrap栅格系统的使用详解
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。这篇文章主要介绍了Bootstrap的核心——栅格系统的使用,需要的朋友可以参考下
2017-10-10
25个非常棒的jQuery滑块插件和教程小结
图像滑块和幻灯片效果，已成为网页设计的基本要素。它们以有趣的方式展示视觉内容。如果你一直想知道这是如何实现的，那么这里的25个非常棒的 jQuery 图片滑块制作教程将帮助您实现这种效果
2011-09-09
jQuery css() 方法动态修改CSS属性
在jquery中我们要动态的修改css属性我们只要使用css()方法就可以实现了，下面我来给各位同学详细介绍介绍。
2016-09-09

jQuery实现带有洗牌效果的动画分页实例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具