JQuery插件Quicksand实现超炫的动画洗牌效果

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JQuery插件Quicksand实现超炫的动画洗牌效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2598字，纯文字阅读大概需要4分钟。

内容图文

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+，以及其他高级浏览器均测试通过。

以上所述就是本文的全部内容了，希望大家能够喜欢。

内容总结

以上是互联网集市为您收集整理的JQuery插件Quicksand实现超炫的动画洗牌效果全部内容，希望文章能够帮你解决JQuery插件Quicksand实现超炫的动画洗牌效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端