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 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
JQuery开发的数独游戏代码
Oct 29 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
让mocha支持ES6模块的方法实现
Jan 14 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 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
网页游戏开发入门教程二(游戏模式+系统)
2009/11/02 PHP
发一个php简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
基于PHP magic_quotes_gpc的使用方法详解
2013/06/24 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
jQuery移动和复制dom节点实用DOM操作案例
2012/12/17 Javascript
Javascript浅谈之this
2013/12/17 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
vue动态生成dom并且自动绑定事件
2017/04/19 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
解决jQuery使用append添加的元素事件无效的问题
2018/08/30 jQuery
详解ES6 Symbol 的用途
2018/10/14 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
[01:02:38]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第二场 1月10日
2021/03/11 DOTA
Python中暂存上传图片的方法
2015/02/18 Python
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
python生成验证码图片代码分享
2016/01/28 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
使用tensorflow实现VGG网络,训练mnist数据集方式
2020/05/26 Python
基于Python实现天天酷跑功能
2021/01/06 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
运动会闭幕式解说词
2014/02/21 职场文书
财政局个人总结
2015/03/04 职场文书
清明节寄语2015
2015/03/23 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书