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 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
Aug 11 Javascript
jQuery源码分析之jQuery中的循环技巧详解
Sep 06 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
微信小程序按钮点击动画效果的实现
Sep 04 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 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
老照片 - 几十年前的收音机与人
2021/03/02 无线电
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
Google韩国首页图标动画效果
2007/08/26 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
使用js实现的简单拖拽效果
2015/03/18 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
es5 类与es6中class的区别小结
2020/11/09 Javascript
Python求解任意闭区间的所有素数
2018/06/10 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
python爬虫之自制英汉字典
2019/06/24 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
Java基础面试题
2012/11/02 面试题
四风问题自查报告剖析材料
2014/02/08 职场文书
项目投资意向书
2014/04/01 职场文书
关于安全演讲稿
2014/05/09 职场文书
十八大演讲稿
2014/05/22 职场文书
2015年人事科工作总结
2015/04/28 职场文书
基层工作经历证明
2015/06/19 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
十一月早安语录:把心放轻,人生就是一朵自在的云
2019/11/04 职场文书