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 相关文章推荐
一组JS创建和操作表格的函数集合
May 07 Javascript
一行代码告别document.getElementById
Jun 01 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
使用JQuery实现智能表单验证功能
Mar 08 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
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
无线电广播的开始
2002/01/30 无线电
详解PHP中的状态模式编程
2015/08/11 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
js实现跨域的方法实例详解
2015/06/24 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
基于DOM节点删除之empty和remove的区别(详解)
2017/09/11 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
JavaScript仿京东秒杀倒计时
2020/03/17 Javascript
js验证密码强度解析
2020/03/18 Javascript
wxPython中listbox用法实例详解
2015/06/01 Python
Python基本语法经典教程
2016/03/11 Python
Python字符串处理实例详解
2017/05/18 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
python线程信号量semaphore使用解析
2019/11/30 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
30年同学聚会邀请函
2014/01/25 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
党员反四风学习心得体会
2016/01/22 职场文书