JQuery plug-in Quicksand mencapai effect_jquery animasi yang menakjubkan

Quicksand ialah pemalam berasaskan jQuery yang boleh menyusun semula dan menapis elemen pada halaman Ia juga mempunyai kesan animasi peralihan shuffling yang sangat baik dan boleh digunakan dalam banyak projek untuk meningkatkan pengalaman pengguna. Artikel ini menerangkan penggunaan Quicksand berdasarkan aplikasi projek sebenar.

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> 

Struktur XHTML terdiri daripada bar navigasi dan senarai kandungan. Dalam senarai kandungan #senarai, saya menambah atribut id pada setiap li Ini adalah untuk memudahkan panggilan pemalam 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;} 

Saya menetapkan gaya tab untuk bar navigasi #nav dan menetapkan gaya untuk keadaan yang dipilih #nav ul li.cur. Kawasan kandungan senarai juga menetapkan ketinggian dan lebar tetap untuk setiap imej.

jQuery

Mula-mula, salin kandungan kawasan senarai:

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

Kemudian, untuk melaksanakan gaya tab, apabila navigasi diklik, gaya yang dipilih ditambahkan pada item yang sedang diklik dan gaya yang dipilih dialih keluar daripada item lain:

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

Kemudian, teruskan mendapatkan ID pilihan yang sedang diklik semasa masa klik, dapatkan sumber data $source dengan menilai nilai ID, dan akhirnya hubungi pemalam pasir jeragat. Kod lengkap adalah seperti berikut:

$("#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' 
    }); 
  }); 
}); 

Pemalam Quicksand menyediakan beberapa parameter boleh dikonfigurasikan:
tempoh: Masa animasi peralihan, dalam milisaat.
atribut: atribut data yang berkaitan, ditetapkan kepada id dalam contoh ini.
pelonggaran: kaedah penimbal animasi.

Terdapat juga peningkatan kaedah: function(c) {} untuk menyesuaikan panggilan fungsi.

Sebenarnya, tiada kesan animasi peralihan di bawah IE6 dan pelayar lanjutan lain telah lulus ujian.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.