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 相关文章推荐
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
Jan 04 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
AngularJS表单验证功能分析
May 26 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
使用vue实现grid-layout功能实例代码
Jan 05 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
微信小程序实现点击导航条切换页面
Nov 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中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
PHP实现打包zip并下载功能
2018/06/12 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
JavaScript获取/更改文本框的值的实例代码
2013/08/02 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
如何搜索查找并解决Django相关的问题
2014/06/30 Python
python提示No module named images的解决方法
2014/09/29 Python
Linux下将Python的Django项目部署到Apache服务器
2015/12/24 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
python pandas生成时间列表
2019/06/29 Python
Python操作Jira库常用方法解析
2020/04/10 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
国贸专业自荐信范文
2014/03/02 职场文书
机关作风建设自查报告
2014/10/22 职场文书
五年级学生评语大全
2014/12/26 职场文书
房租涨价通知
2015/04/23 职场文书
党支部审查意见
2015/06/02 职场文书
战马观后感
2015/06/08 职场文书
紧急迫降观后感
2015/06/15 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
MySQL 数据库范式化设计理论
2022/04/22 MySQL