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 相关文章推荐
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
基于JQuery制作的产品广告效果
Dec 08 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
深入浅析JavaScript中的Function类型
Jul 09 Javascript
常用的js验证和数据处理总结
Aug 02 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 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操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
php的sso单点登录实现方法
2015/01/08 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
JavaScript Date对象使用总结
2009/05/14 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
javascript arguments使用示例
2014/12/16 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
Postman模拟发送带token的请求方法
2018/03/31 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
分享一下Python 开发者节省时间的10个方法
2015/10/02 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
工程部主管岗位职责
2013/11/17 职场文书
关于迟到的检讨书
2014/01/26 职场文书
学校安全生产承诺书
2014/05/23 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
win10更新失败无限重启解决方法
2022/04/19 数码科技
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技