Das JQuery-Plug-in Quicksand erzielt einen atemberaubenden animierten Shuffling-Effekt_jquery

Quicksand ist ein jQuery-basiertes Plug-in, das Elemente auf der Seite neu anordnen und filtern kann. Es verfügt außerdem über einen sehr guten Mischeffekt für Übergangsanimationen und kann in vielen Projekten verwendet werden, um die Benutzererfahrung zu verbessern. In diesem Artikel wird die Verwendung von Quicksand anhand tatsächlicher Projektanwendungen erläutert.

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> 

Die XHTML-Struktur besteht aus einer Navigationsleiste und einer Inhaltsliste. In der Inhaltsliste #list habe ich jedem Li ein ID-Attribut hinzugefügt. Dies dient dazu, den Aufruf des Quicksand-Plug-Ins zu erleichtern.

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

Ich habe den Tab-Stil für die Navigationsleiste #nav festgelegt und den Stil für den ausgewählten Status #nav ul li.cur. Der Listeninhaltsbereich legt außerdem für jedes Bild eine feste Höhe und Breite fest.

jQuery

Kopieren Sie zunächst den Inhalt des Listenbereichs:

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

Um dann den Tab-Stil zu implementieren, wird beim Klicken auf die Navigation der ausgewählte Stil zum aktuell angeklickten Element hinzugefügt und der ausgewählte Stil wird von anderen Elementen entfernt:

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

Ermitteln Sie dann während der Klickzeit weiterhin die ID der aktuell angeklickten Option, ermitteln Sie die Datenquelle $source durch Beurteilen des ID-Werts und rufen Sie schließlich das Quicksand-Plug-In auf. Der vollständige Code lautet wie folgt:

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

Das Quicksand-Plug-in bietet mehrere konfigurierbare Parameter:
Dauer: Die Zeit der Übergangsanimation in Millisekunden.
Attribut: Attribut der zugehörigen Daten, in diesem Beispiel auf id gesetzt.
Lockerung: Animationspuffermethode.

Es gibt auch eine Methodenerweiterung: function(c) {}, um Funktionsaufrufe anzupassen.

Unter IE6 gibt es übrigens keinen Übergangsanimationseffekt, und andere fortgeschrittene Browser haben den Test bestanden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.