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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
JavaScript 继承详解(四)
Jul 13 Javascript
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
jquery插件开发之实现google+圈子选择功能
Mar 10 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
Jun 25 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
JavaScript生成指定范围随机数和随机序列的方法
May 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 输出缓存详解
2009/06/20 PHP
用PHP代码给图片加水印
2015/07/01 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
AngularJS中$http使用的简单介绍
2017/03/17 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
vue3+typescript实现图片懒加载插件
2020/10/26 Javascript
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
详解Python传入参数的几种方法
2019/05/16 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
详解Python中import机制
2020/09/11 Python
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
美国知名的摄影器材销售网站:Adorama
2017/02/01 全球购物
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
环境科学专业个人求职信
2013/12/15 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
应届生自荐书
2014/06/23 职场文书
社区两委对照检查材料
2014/08/23 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python