은 이미지나 컨테이너에 사용할 수 있으며 사용법은 일반적인 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의 메서드 이름입니다.