JQuery插件Quicksand實(shí)現(xiàn)超炫的動(dòng)畫洗牌效果

更新時(shí)間：2015年05月03日 17:27:50 投稿：hebedich

Quicksand這是一個(gè)非常不錯(cuò)的 jQuery 插件，用于實(shí)現(xiàn)動(dòng)畫洗牌效果，十分的實(shí)用，有需要的小伙伴可以參考下。

Quicksand是一款基于jQuery的插件，能對(duì)頁(yè)面上的元素進(jìn)行重新排序及過(guò)濾，并且有非常不錯(cuò)的洗牌過(guò)渡動(dòng)畫效果，可以應(yīng)用在很多項(xiàng)目中來(lái)增強(qiáng)用戶體驗(yàn)。本文以實(shí)際項(xiàng)目應(yīng)用來(lái)講解Quicksand的使用。

XHTML

<div id="nav"> 
  <ul> 
   <li id="all" class="cur">所有功能模塊</li> 
   <li id="app">應(yīng)用程序</li> 
   <li id="sys">系統(tǒng)管理</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>節(jié)日祝福</strong></li> 
  <li id="id-3" class="sys"> 
   <img src="images/jifen.gif" width="80" height="60" alt="" /> 
   <strong>積分管理</strong></li> 
  ....N多l(xiāng)i 
</ul>

XHTML結(jié)構(gòu)由一個(gè)導(dǎo)航條和一個(gè)內(nèi)容列表組成。在內(nèi)容列表#list里，我給每個(gè)li都加了一個(gè)id屬性，這個(gè)是為了方便Quicksand插件調(diào)用。

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;}

我給導(dǎo)航條#nav設(shè)置了選項(xiàng)卡風(fēng)格，并設(shè)置選中狀態(tài)#nav ul li.cur的樣式。列表內(nèi)容區(qū)也設(shè)置了每張圖片的固定高度和寬度。

jQuery

首先，復(fù)制列表區(qū)的內(nèi)容:

var $data=$("#list").clone();

然后，來(lái)實(shí)現(xiàn)選項(xiàng)卡風(fēng)格，當(dāng)點(diǎn)擊導(dǎo)航時(shí)，給當(dāng)前點(diǎn)擊的項(xiàng)加上選中的樣式，同時(shí)其他項(xiàng)移除選中狀態(tài)的樣式：

$("#nav ul li").click(function(){ 
  $(this).addClass("cur"); 
  $(this).siblings().removeClass("cur"); 
});

接著，繼續(xù)在單擊時(shí)間里，獲取當(dāng)前點(diǎn)擊選項(xiàng)的ID，通過(guò)判斷ID值，獲取數(shù)據(jù)源$source，最后調(diào)用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插件提供了幾個(gè)參數(shù)可配置：
duration：過(guò)渡動(dòng)畫的時(shí)間，以毫秒為單位。
attribute：關(guān)聯(lián)數(shù)據(jù)的屬性，本例設(shè)置為id。
easing：動(dòng)畫緩沖方式。

還有一個(gè)方法enhancement：function(c) {}可以自定義函數(shù)調(diào)用。

順便提一下，IE6下沒(méi)有過(guò)渡動(dòng)畫效果，IE7+，以及其他高級(jí)瀏覽器均測(cè)試通過(guò)。

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: