jquery 아코디언 기능을 실현하기 위한 jquery 플러그인 개발

은 이미지나 컨테이너에 사용할 수 있으며 사용법은 일반적인 jQuery 플러그인 호출 방식과 동일합니다. 구현 원리는 이해하기 어렵지 않으며 코드 주석에 모두 나와 있습니다. 공부하고 싶다면 아래 코드나 샘플 데모를 보면 됩니다.

코드 복사 코드는 다음과 같습니다.

;(function($){
/*
* jQuery 기반의 간단한 아코디언 전환 플러그인
*/
$.fn.iAccordion=function(iSet){
var self=this;
iSet=$. 확장({유형: 'mouseover',선택:'img',Cur:0,InitInterval:100,Interval:500,Easing:''},iSet||{});
                                                           > .
* Select: 전환이 필요한 요소 집합을 가져오는 데 사용되는 선택기
* Cur: 기본 확장 요소의 인덱스
* InitInterval: 아코디언 효과 애니메이션 간격 초기화
* 간격: 마우스 이벤트 애니메이션 간격 시간
* Easing: jQuery.easing 지원이 필요한 애니메이션 효과입니다. 매개변수는 jQuery.easing@ http://gsgd.co.uk/sandbox/jquery/easing/을 참조하세요. 🎜> */
var item,boxW,selectW,animateW,sIndex,animateL;
$(self).each(function(){
position':'relative','overflow':'hidden '});
                                                                                                  > 상자W- selectW)/(item.size()-1); (this).animate({'left':animateW*i 'px'},iSet.InitInterval,iSet.Easing);
                                                                                .on(iSet.Type ,기능(e){//마우스 이벤트 바인딩
                                                                                                                                                  마우스 이벤트 애니메이션은 요소 인덱스 값과 현재 요소 인덱스 값 사이의 크기 관계를 판단하여 현재 요소에 애니메이션을 적용하고 애니메이션으로 배열합니다
 n-1) : animateL=animateW*n;
                                                                 ;
       }).eq(iSet.C ur).trigger(iSet.Type);
        });

전화는 어떻게 하나요?
1. 위의 플러그인 코드를 페이지에 삽입하세요.
2. $(selectmain).iAccordion({…})
3. 플러그인.
Easing을 정의해야 하는 경우 Easing의 매개변수는 easyOutBounce, easyOutQuint 등과 같은 jQuery.easing의 메서드 이름입니다.