JQuery插件Quicksand实现超炫的动画洗牌效果


Posted in Javascript onMay 03, 2015

Quicksand是一款基于jQuery的插件,能对页面上的元素进行重新排序及过滤,并且有非常不错的洗牌过渡动画效果,可以应用在很多项目中来增强用户体验。本文以实际项目应用来讲解Quicksand的使用。

XHTML

<div id="nav"> 
  <ul> 
   <li id="all" class="cur">所有功能模块</li> 
   <li id="app">应用程序</li> 
   <li id="sys">系统管理</li> 
  </ul> 
</div> 
<ul id="list" class="image-grid"> 
  <li id="id-1" class="app"> 
   <img src="images/birth.gif" width="80" height="60" alt="" /> 
   <strong>生日祝福</strong></li> 
  <li id="id-2" class="app"> 
   <img src="images/festival.gif" width="80" height="60" alt="" /> 
   <strong>节日祝福</strong></li> 
  <li id="id-3" class="sys"> 
   <img src="images/jifen.gif" width="80" height="60" alt="" /> 
   <strong>积分管理</strong></li> 
  ....N多li 
</ul>

XHTML结构由一个导航条和一个内容列表组成。在内容列表#list里,我给每个li都加了一个id属性,这个是为了方便Quicksand插件调用。

CSS

#nav{height:36px; margin:10px auto; border-bottom:1px solid #36c} 
#nav ul{list-style:none; padding-left:120px} 
#nav ul li{float:left; height:34px; line-height:34px; margin-left:6px; 
padding:0px 12px; border-left:1px solid #d3d3d3; border-right:1px solid #d3d3d3; 
 border-top:1px solid #d3d3d3; background:#f7f7f7; cursor:pointer} 
#nav ul li.cur{height:35px; background:#36c; color:#fff} 
.image-grid{zoom:1} 
.image-grid li{width: 82px; height:100px; margin: 20px 0 0 35px; float:left; 
 text-align: center; line-height:18px;color: #686f74;overflow:hidden;} 
.image-grid li img,.image-grid li strong{display:block;}

我给导航条#nav设置了选项卡风格,并设置选中状态#nav ul li.cur的样式。列表内容区也设置了每张图片的固定高度和宽度。

jQuery

首先,复制列表区的内容:

var $data=$("#list").clone();

然后,来实现选项卡风格,当点击导航时,给当前点击的项加上选中的样式,同时其他项移除选中状态的样式:

$("#nav ul li").click(function(){ 
  $(this).addClass("cur"); 
  $(this).siblings().removeClass("cur"); 
});

接着,继续在单击时间里,获取当前点击选项的ID,通过判断ID值,获取数据源$source,最后调用quicksand插件。完整的代码如下:

$("#nav ul li").click(function(){ 
  $(this).addClass("cur"); 
  $(this).siblings().removeClass("cur"); 
  var id = $(this).attr("id"); 
    if(id=="all"){ 
      var $source=$data.find("li"); 
    }else{ 
      var $source=$data.find("li[class="+id+"]"); 
    } 
    $("#list").quicksand($source,{ 
      duration: 1000, 
      attribute: 'id', 
      easing: 'swing' 
    }); 
  }); 
});

Quicksand插件提供了几个参数可配置:
duration:过渡动画的时间,以毫秒为单位。
attribute:关联数据的属性,本例设置为id。
easing:动画缓冲方式。

还有一个方法enhancement:function(c) {}可以自定义函数调用。

顺便提一下,IE6下没有过渡动画效果,IE7+,以及其他高级浏览器均测试通过。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
JavaScript 未结束的字符串常量常见解决方法
Jan 24 Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
HTML颜色选择器实现代码
Nov 23 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
js实现抽奖的两种方法
Mar 19 Javascript
JQuery页面地址处理插件jqURL详解
May 03 #Javascript
jQuery的animate函数实现图文切换动画效果
May 03 #Javascript
php+ajax+jquery实现点击加载更多内容
May 03 #Javascript
jquery插件hiAlert实现网页对话框美化
May 03 #Javascript
javascript结合canvas实现图片旋转效果
May 03 #Javascript
浅谈javascript语法和定时函数
May 03 #Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
May 03 #Javascript
You might like
php读取3389的脚本
2014/05/06 PHP
php+ajax实时刷新简单实例
2015/02/25 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
jQuery实现TAB选项卡切换特效简单演示
2016/03/04 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
vue-cli+iview项目打包上线之后图标不显示问题及解决方法
2019/10/16 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
python八大排序算法速度实例对比
2017/12/06 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
详解python中的模块及包导入
2019/08/30 Python
python3多线程知识点总结
2019/09/26 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
Python终端输出彩色字符方法详解
2020/02/11 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
澳大利亚最大的护发和护肤品购物网站:RY
2019/12/26 全球购物
生产助理岗位职责
2014/06/18 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
2014年评职称工作总结
2014/11/20 职场文书