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与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
Aug 01 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 Javascript
JS判断浏览器类型与操作系统的方法分析
Apr 30 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
实用函数10
2007/11/08 PHP
PHP 代码规范小结
2012/03/08 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
Vue方法与事件处理器详解
2016/12/01 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
[44:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#4EG VS Fnatic第二局
2016/03/03 DOTA
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
python实现读取命令行参数的方法
2015/05/22 Python
详谈python read readline readlines的区别
2017/09/22 Python
Python实现查看系统启动项功能示例
2018/05/10 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
Python实现二叉树的常见遍历操作总结【7种方法】
2019/03/06 Python
python 图像处理画一个正弦函数代码实例
2019/09/10 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
html5+css3之制作header实例与更新
2020/12/21 HTML / CSS
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
电子商务网站的创业计划书
2014/01/05 职场文书
《石榴》教学反思
2014/03/02 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
全国法制宣传日活动总结
2015/05/05 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
课改心得体会范文
2016/01/25 职场文书
详解Oracle块修改跟踪功能
2021/11/07 Oracle
mysql 获取相邻数据项
2022/05/11 MySQL