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


Posted in Javascript onAugust 31, 2015

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

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

运行效果截图如下:

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程序设计有所帮助。

Javascript 相关文章推荐
javascript操作文本框readOnly
May 15 Javascript
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
7个JS基础知识总结
Mar 05 Javascript
JS iFrame加载慢怎么解决
May 13 Javascript
PassWord输入框代码分享
Jun 07 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
jquery选择器简述
Aug 31 #Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 #Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 #Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 #Javascript
javascript中substring()、substr()、slice()的区别
Aug 30 #Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 #Javascript
javascript中sort() 方法使用详解
Aug 30 #Javascript
You might like
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
YII2框架中actions的作用与使用方法示例
2020/03/13 PHP
一个javascript图片阅览组件
2010/11/09 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
2016/08/16 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python下如何让web元素的生成更简单的分析
2008/07/17 Python
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
在Python 不同级目录之间模块的调用方法
2019/01/19 Python
Python两个字典键同值相加的几种方法
2019/03/05 Python
python实现简单加密解密机制
2019/03/19 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
幼师自我鉴定范文
2013/10/01 职场文书
中学生在校期间的自我评价分享
2013/11/13 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
自主招生推荐信怎么写
2015/03/26 职场文书
工作态度检讨书范文
2015/05/06 职场文书
Go语言读取txt文档的操作方法
2022/01/22 Golang
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL