JQuery 플러그인 Quicksand는 놀라운 애니메이션 셔플링 효과를 구현합니다._jquery

Quicksand는 페이지의 요소를 재정렬하고 필터링할 수 있는 jQuery 기반 플러그인입니다. 또한 셔플링 전환 애니메이션 효과가 매우 뛰어나며 많은 프로젝트에서 사용자 경험을 향상시키는 데 사용할 수 있습니다. 이 글에서는 실제 프로젝트 애플리케이션을 기반으로 Quicksand의 사용법을 설명합니다.

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> 

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를 획득하고 마지막으로 유사 플러그인을 호출합니다. 전체 코드는 다음과 같습니다.

$("#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 플러그인은 구성 가능한 여러 매개변수를 제공합니다.
지속 시간: 전환 애니메이션 시간(밀리초)입니다.
attribute: 연관된 데이터의 속성으로, 이 예에서는 id로 설정됩니다.
easing: 애니메이션 버퍼링 방법.

함수 호출을 맞춤설정하기 위한 function(c) {}라는 메소드 개선 사항도 있습니다.

그런데 IE6에서는 전환 애니메이션 효과가 없으며 기타 고급 브라우저에서는 테스트를 통과했습니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.