玩法介绍当前位置:星鸿娱乐 > 玩法介绍 > >

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

  

[jQuery,quicksand,洗牌]JQuery插件Quicksand实现超炫的动画洗牌效果

  

Quicksand是一款基于jQuery的插件,能对页面上的元素进行重新排序及过滤,并且有非常不错的洗牌过渡动画效果,可以应用在很多项目中来增强用户体验。本文以实际项目应用来讲解Quicksand的使用。

  

  

XHTML  
  
  

  
  
  
  
      
  • 所有功能模块
  •   
  • 应用程序
  •   
  • 系统管理
  •   
  
  
      
  •     生日祝福
  •   
  •     节日祝福
  •   
  •     积分管理
  •   ....N多li  
  
  
  

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

  

  

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

  

(责任编辑:admin)

上一篇:Json实现异步请求提交评论无需跳转其他页面

下一篇:星鸿娱乐平台JavaScript实现复制或剪切内容到剪贴

推荐内容

客户服务热线

010-400-12345

在线客服