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从头学起第一讲
Jul 04 Javascript
DWZ table的原生分页浅谈
Mar 01 Javascript
jquery cookie实现的简单换肤功能适合小网站
Aug 25 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
May 30 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
Vue 实现输入框新增搜索历史记录功能
Oct 15 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
关于JavaScript 中 if包含逗号表达式
Nov 27 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连接oracle数据库及查询数据的方法
2014/12/29 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
索趣科技的答案
2007/02/07 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
jQuery.extend 函数及用法详细
2015/09/06 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
Zabbix实现微信报警功能
2016/10/09 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
简单了解python的一些位运算技巧
2019/07/13 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
python 如何将office文件转换为PDF
2020/09/22 Python
关于python中导入文件到list的问题
2020/10/31 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
校园新闻广播稿
2014/01/10 职场文书
祖国在我心中演讲稿300字
2014/05/04 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
保护环境倡议书100字
2014/05/19 职场文书
自主招生专家推荐信
2015/03/26 职场文书
2015年度企业工作总结
2015/05/21 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP
Python深度学习之实现卷积神经网络
2021/06/05 Python
Mybatis是这样防止sql注入的
2021/12/06 Java/Android