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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
js监听输入框值的即时变化onpropertychange、oninput
Jul 13 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
Node.js中的不安全跳转如何防御详解
Oct 21 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 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将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
jQuery插件ContextMenu自定义图标
2017/03/15 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
Python版的文曲星猜数字游戏代码
2013/09/02 Python
python列表去重的二种方法
2014/02/14 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
Python OpenCV读取显示视频的方法示例
2020/02/20 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
捷克玩具商店:Bambule
2019/02/23 全球购物
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
nohup的用法
2012/11/26 面试题
跟单文员的岗位职责
2013/11/14 职场文书
公司业务主管岗位职责
2013/12/07 职场文书
公司清洁工岗位职责
2013/12/14 职场文书
《问银河》教学反思
2014/02/19 职场文书
班主任班级寄语大全
2014/04/04 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
消防安全培训工作总结
2015/10/23 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript