jqueryプラグインを開発し、jqueryアコーディオン機能を共有する。
画像やコンテナに使用できます。従来のjQueryプラグインと同じように起動します。原理を実現するのも理解しにくくなくて、すべてコードの注釈の中にあります。研究したいのは下のコードやサンプルを見てデモンストレーションができます。
;(function($){
/*
* jQuery
*/
$.fn.iAccordion=function(iSet){
var self=this;
iSet=$.extend({Type:'mouseover',Select:'img',Cur:0,InitInterval:100,Interval:500,Easing:''},iSet||{});
/*
* Type: ，mouseover,click,mouseleave
* Select: ，
* Cur:
* InitInterval:
* Interval:
* Easing: ， jQuery.easing ， jQuery.easing@ http://gsgd.co.uk/sandbox/jquery/easing/
*/
var item,boxW,selectW,animateW,sIndex,animateL;
$(self).each(function(){
//
$(this).css({'position':'relative','overflow':'hidden'});
item=$(this).find(iSet.Select);
//
item.css({'position':'absolute','left':0,'top':0});
boxW=$(this).outerWidth();
selectW=item.outerWidth();
animateW=(boxW-selectW)/(item.size()-1);
// data
item.each(function(i){
$(this).animate({'left':animateW*i+'px'},iSet.InitInterval,iSet.Easing);
$(this).data('index',i);
}).on(iSet.Type,function(e){//
//
sIndex=$(this).data('index');
// ，
item.each(function(n){
n > sIndex ? animateL=selectW+animateW*(n-1) : animateL=animateW*n;
$(this).stop().animate({'left':animateL+'px'},iSet.Interval,iSet.Easing);
});
}).eq(iSet.Cur).trigger(iSet.Type);
});
}
})(jQuery);