首页
所有分类
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 相关文章推荐
自己的js工具 Cookie 封装
Aug 21 Javascript
Js切换功能的简单方法
Nov 23 Javascript
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
基于JQuery 选择器使用说明介绍
Apr 18 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
javascript实现倒计时（精确到秒）
Jun 26 Javascript
jquery实现的Banner广告收缩效果代码
Sep 02 Javascript
基于jQuery实现select下拉选择可输入附源码下载
Feb 03 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
小程序实现分类页
Jul 12 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
BottomSheetDialog(1) 注解(1) dataBinding(1) ip2region(1) scrapy(1) 反射(1) RestTemplate(1) Quartz(1) HttpClient(1) Hive(5)
You might like
php文件缓存方法总结
2016/03/16 PHP
PHP简单预防sql注入的方法
2016/09/27 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
2012/02/03 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
ES6的新特性概览
2016/03/10 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
javascript实现数字配对游戏的实例讲解
2017/12/14 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
2018/10/09 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
python爬取微信公众号文章
2018/08/31 Python
Python语言快速上手学习方法
2018/12/14 Python
Python:Numpy 求平均向量的实例
2019/06/29 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
介绍一下gcc特性
2012/01/20 面试题
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
个人自荐信
2013/12/05 职场文书
开业典礼主持词
2014/03/21 职场文书
4种方法python批量修改替换列表中元素
2022/04/07 Python
MySQL创建管理HASH分区
2022/04/13 MySQL