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 相关文章推荐
jquery 弹出层实现代码
Oct 30 Javascript
json对象转字符串如何实现
Dec 02 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
js创建对象的方式总结
Jan 10 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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
关于页面优化和伪静态
2009/10/11 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
php递归json类实例
2014/12/02 PHP
Yii中CGridView关联表搜索排序方法实例详解
2014/12/03 PHP
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
Javascript事件实例详解
2013/11/06 Javascript
node.js中的fs.realpathSync方法使用说明
2014/12/16 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
javascript正则表达式基础知识入门
2015/04/20 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
Python文件和流(实例讲解)
2017/09/12 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
物流专业求职计划书
2014/01/10 职场文书
技校毕业生自荐信
2014/06/03 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
师德师风事迹材料
2014/12/20 职场文书
认真学习保证书
2015/02/26 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
小学数学国培研修日志
2015/11/13 职场文书
六年级作文之关于梦
2019/10/22 职场文书
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python