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 中的事件教程
Apr 05 Javascript
JavaScript 格式字符串的应用
Mar 29 Javascript
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
js最简单的拖拽效果实现代码
Sep 24 Javascript
js的onload事件及初始化按钮事件示例代码
Sep 25 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
js实现特别简单的钟表效果
Sep 14 Javascript
Webpack的Loader和Plugin的区别
Nov 09 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 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
SWFObject Flash js调用类
2008/07/08 Javascript
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
实例详解jQuery的无new构建
2016/08/02 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
2016/12/02 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
2018/12/13 Javascript
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
Python回调函数用法实例详解
2015/07/02 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
python如何读写json数据
2018/03/21 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
Python3常用内置方法代码实例
2019/11/18 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
python爬取本站电子书信息并入库的实现代码
2020/01/20 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
优秀公益广告词大全
2014/03/19 职场文书
班长演讲稿范文
2014/04/24 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
节水标语大全
2014/06/11 职场文书
三严三实对照检查材料
2014/09/22 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
理想国读书笔记
2015/06/25 职场文书
简爱读书笔记
2015/06/26 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python
怎么禁用Win11输入法 最新Win11输入法关闭教程
2022/08/05 数码科技