首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
JS getStyle获取最终样式函数代码
Apr 01 Javascript
指定区域的图片自动按比例缩小的js代码（防止页面被图片撑破）
Feb 21 Javascript
JavaScript的null和undefined区别示例介绍
Sep 15 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 Javascript
javascript实现雪花飘落效果
Aug 19 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
BCL3000(2) PL990(2) ICF-SW07(1) 乐信(1) 低放电路(1) ICF-SW7600(1) PL550(1) RP2100(1) H-501(1) PL450(1)
You might like
完美解决PHP中文乱码
2009/11/26 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
php redis实现文章发布系统（用户投票系统）
2017/03/04 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
js查找父节点的简单方法
2008/06/28 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
python 简单的多线程链接实现代码
2016/08/28 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
Python机器学习算法之k均值聚类（k-means）
2018/02/23 Python
详解用python写一个抽奖程序
2019/05/10 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
电子信息毕业生自荐信
2013/11/16 职场文书
教学改革实施方案
2014/03/31 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
个人借款协议书范本
2014/11/17 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书