萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> JQuery插件Quicksand實現超炫的動畫洗牌效果

JQuery插件Quicksand實現超炫的動畫洗牌效果

   Quicksand這是一個非常不錯的 jQuery 插件,用於實現動畫洗牌效果,十分的實用,有需要的小伙伴可以參考下。

  Quicksand是一款基於jQuery的插件,能對頁面上的元素進行重新排序及過濾,並且有非常不錯的洗牌過渡動畫效果,可以應用在很多項目中來增強用戶體驗。本文以實際項目應用來講解Quicksand的使用。

  XHTML

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <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

  ?

1 2 3 4 5 6 7 8 9 10 #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

  首先,復制列表區的內容:

  ?

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

  然後,來實現選項卡風格,當點擊導航時,給當前點擊的項加上選中的樣式,同時其他項移除選中狀態的樣式:

  ?

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

  接著,繼續在單擊時間裡,獲取當前點擊選項的ID,通過判斷ID值,獲取數據源$source,最後調用quicksand插件。完整的代碼如下:

  ?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 $("#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+,以及其他高級浏覽器均測試通過。

  以上所述就是本文的全部內容了,希望大家能夠喜歡。

copyright © 萬盛學電腦網 all rights reserved