SlideView 圖片滑動(dòng)(擴(kuò)展/收縮)展示效果

更新時(shí)間：2010年08月01日 18:30:00 作者：

滑動(dòng)展示效果主要用在圖片或信息的滑動(dòng)展示，也可以設(shè)置一下做成簡單的口風(fēng)琴（Accordion）效果。

這個(gè)其實(shí)就是以前寫的圖片滑動(dòng)展示效果的改進(jìn)版，那是我第一篇比較受關(guān)注的文章，是時(shí)候整理一下了。
有如下特色：
1，有四種方向模式選擇；
2，結(jié)合tween算法實(shí)現(xiàn)多種滑動(dòng)效果；
3，能自動(dòng)根據(jù)滑動(dòng)元素計(jì)算展示尺寸；
4，也可自定義展示或收縮尺寸；
5，可擴(kuò)展自動(dòng)切換功能；
6，可擴(kuò)展滑動(dòng)提示功能。
兼容：ie6/7/8, firefox 3.6.8, opera 10.51, safari 4.0.5, chrome 5.0

程序說明

【基本原理】

通過設(shè)置滑動(dòng)元素的位置坐標(biāo)(left/right/top/bottom)，實(shí)現(xiàn)鼠標(biāo)進(jìn)入的目標(biāo)元素滑動(dòng)展示，其他元素滑動(dòng)收縮的效果。
難點(diǎn)是如何控制多個(gè)滑動(dòng)元素同時(shí)進(jìn)行不同的滑動(dòng)，這里關(guān)鍵就在于把整體滑動(dòng)分解成各個(gè)滑動(dòng)元素進(jìn)行各自的滑動(dòng)。
方法是給各個(gè)滑動(dòng)元素設(shè)置目標(biāo)值，然后各自向自己的目標(biāo)值滑動(dòng)，當(dāng)全部都到達(dá)目標(biāo)值就完成了。

【容器設(shè)置】

在_initContainer方法中進(jìn)行容器設(shè)置，由于后面滑動(dòng)參數(shù)的計(jì)算要用到容器，所以要先設(shè)置容器。
先設(shè)置容器樣式，要實(shí)現(xiàn)滑動(dòng)需要設(shè)置容器相對(duì)或絕對(duì)定位，并且設(shè)置overflow為"hidden"來固定容器大小，而滑動(dòng)元素也要設(shè)置絕對(duì)定位。

鼠標(biāo)移出容器時(shí)會(huì)觸發(fā)_LEAVE移出函數(shù)：

$$E.addEvent( container, "mouseleave", this._LEAVE );
其中_LEAVE函數(shù)是這樣的：

代碼
var CLOSE = $$F.bind( this.close, this );
this._LEAVE = $$F.bind( function(){
clearTimeout(this._timerDelay);
$$CE.fireEvent( this, "leave" );
if ( this.autoClose ) { this._timerDelay = setTimeout( CLOSE, this.delay ); }
}, this );
當(dāng)autoClose屬性為true時(shí)才會(huì)延時(shí)觸發(fā)close方法。

【滑動(dòng)對(duì)象】

程序初始化時(shí)會(huì)根據(jù)滑動(dòng)元素創(chuàng)建滑動(dòng)對(duì)象集合。
先獲取滑動(dòng)元素：

var nodes = opt.nodes ? $$A.map( opt.nodes, function(n) { return n; } )
: $$A.filter( container.childNodes, function(n) { return n.nodeType == 1; });
如果沒有自定義nodes滑動(dòng)元素，就從容器獲取childNodes作為滑動(dòng)元素。
還要用nodeType篩選一下，因?yàn)閕e外的瀏覽器都會(huì)把空格作為childNodes的一部分。

接著用獲取的滑動(dòng)元素生成程序需要的_nodes滑動(dòng)對(duì)象集合：

this._nodes = $$A.map( nodes, function(node){ return { "node": node }; });
滑動(dòng)對(duì)象用"node"屬性記錄滑動(dòng)元素。

然后在_initNodes方法中初始化滑動(dòng)對(duì)象。
每個(gè)滑動(dòng)對(duì)象都有3個(gè)用來計(jì)算滑動(dòng)目標(biāo)值的屬性：defaultTarget默認(rèn)目標(biāo)值，max展示尺寸，min收縮尺寸。
如果有自定義max尺寸或min尺寸，會(huì)根據(jù)自定義的尺寸來計(jì)算。
程序會(huì)優(yōu)先按max來計(jì)算：

max = Math.max( max <= 1 ? max * clientSize : Math.min( max, clientSize ), defaultSize );
min = ( clientSize - max ) / maxIndex;
其中clientSize是容器的可見區(qū)域尺寸，defaultSize是平均分配尺寸。
如果max是小數(shù)或1就按百分比計(jì)算，再把尺寸限制在defaultSize到clientSize的范圍內(nèi)。
再計(jì)算減去max后其他收縮元素的平均尺寸，就可以得到min了。

如果沒有自定義max再按自定義min來計(jì)算：

min = Math.min( min < 1 ? min * clientSize : min, defaultSize );
max = clientSize - maxIndex * min;
同樣，如果min是小數(shù)就按百分比計(jì)算，再做范圍限制，然后計(jì)算得出max。

最后得到自定義尺寸計(jì)算函數(shù)：

getMax = function(){ return max; };
getMin = function(){ return min; };

如果沒有自定義max或min，就根據(jù)元素尺寸來計(jì)算：

getMax = function(o){ return Math.max( Math.min( o.node[ offset ], clientSize ), defaultSize ); };
getMin = function(o){ return ( clientSize - o.max ) / maxIndex; };
把元素尺寸作為展示尺寸來計(jì)算，同樣要做范圍限制，然后計(jì)算收縮尺寸。

得到尺寸計(jì)算函數(shù)后，再用_each方法歷遍并設(shè)置滑動(dòng)對(duì)象：

o.current = o.defaultTarget = getDefaultTarget(i);
o.max = getMax(o); o.min = getMin(o);
其中current是當(dāng)前坐標(biāo)值，在移動(dòng)計(jì)算時(shí)作為開始值的。
而defaultTarget是默認(rèn)目標(biāo)值，即默認(rèn)狀態(tài)時(shí)移動(dòng)的目標(biāo)值，根據(jù)defaultSize和索引得到。

還要設(shè)置當(dāng)鼠標(biāo)進(jìn)入滑動(dòng)元素時(shí)觸發(fā)show展示函數(shù)：

代碼
var node = o.node, SHOW = $$F.bind( this.show, this, i );
o.SHOW = $$F.bind( function(){
clearTimeout(this._timerDelay);
this._timerDelay = setTimeout( SHOW, this.delay );
$$CE.fireEvent( this, "enter", i );
}, this );
$$E.addEvent( node, "mouseenter", o.SHOW );
要在滑動(dòng)元素的"mouseenter"事件中觸發(fā)，并傳遞當(dāng)前滑動(dòng)對(duì)象的索引，再加上延時(shí)設(shè)置就可以了。

【滑動(dòng)展示】

當(dāng)鼠標(biāo)進(jìn)入其中一個(gè)滑動(dòng)元素，就會(huì)觸發(fā)show方法開始展示。

首先執(zhí)行_setMove方法設(shè)置滑動(dòng)參數(shù)，并以索引作為參數(shù)。
在_setMove里面主要是設(shè)置計(jì)算移動(dòng)值時(shí)需要的目標(biāo)值、開始值和變化值。
先修正索引，錯(cuò)誤的索引值會(huì)設(shè)置為0：

this._index = index = index < 0 || index > maxIndex ? 0 : index | 0;

再根據(jù)索引獲取要展示的滑動(dòng)對(duì)象，通過展示對(duì)象的min和max得到getTarget目標(biāo)值函數(shù)：

var nodeShow = nodes[ index ], min = nodeShow.min, max = nodeShow.max;
getTarget = function(o, i){ return i <= index ? min * i : min * ( i - 1 ) + max; };
如果滑動(dòng)對(duì)象就是展示對(duì)象或者在展示對(duì)象前面，目標(biāo)值就是min * i，因?yàn)榈趇+1個(gè)滑動(dòng)對(duì)象的目標(biāo)值就是i個(gè)min的大小。
否則，目標(biāo)值就是min * ( i - 1 ) + max，其實(shí)就是把展示對(duì)象的位置換成max。

然后設(shè)置每個(gè)滑動(dòng)對(duì)象的參數(shù)屬性：

this._each( function(o, i){
o.target = getTarget(o, i);
o.begin = o.current;
o.change = o.target - o.begin;
});
其中target記錄目標(biāo)值，begin通過current得到開始值，目標(biāo)值和開始值的差就是change改變值。

設(shè)置完成后，就執(zhí)行_easeMove方法開始滑移，在里面重置_time屬性為0，再就執(zhí)行_move程序就正式開始移動(dòng)了。
首先判斷_time是否到達(dá)duration持續(xù)時(shí)間，沒有到達(dá)的話，就繼續(xù)移動(dòng)。
程序設(shè)置了一個(gè)_tweenMove移動(dòng)函數(shù)，用來設(shè)置緩動(dòng)：

this._setPos( function(o) {
return this.tween( this._time, o.begin, o.change, this.duration );
});
利用tween算法，結(jié)合當(dāng)前時(shí)間，開始值，改變值和持續(xù)時(shí)間，就能得到當(dāng)前要移動(dòng)的坐標(biāo)值。
ps：關(guān)于tween緩動(dòng)可以參考tween算法及緩動(dòng)效果。

當(dāng)_time到達(dá)duration說明滑動(dòng)已經(jīng)完成，再執(zhí)行一次_targetMove目標(biāo)值移動(dòng)函數(shù)：

this._setPos( function(o) { return o.target; } );
直接移動(dòng)到目標(biāo)值，可以防止可能出現(xiàn)的計(jì)算誤差導(dǎo)致移位不準(zhǔn)確。

【關(guān)閉和重置】

close方法可以關(guān)閉展示，即滑動(dòng)到默認(rèn)狀態(tài)，默認(rèn)在移出容器時(shí)就會(huì)執(zhí)行。
默認(rèn)狀態(tài)是指全部滑動(dòng)元素位于defaultTarget默認(rèn)目標(biāo)值的狀態(tài)。
先用_setMove設(shè)置移動(dòng)參數(shù)，當(dāng)_setMove沒有索引參數(shù)時(shí)，就會(huì)設(shè)置目標(biāo)值為默認(rèn)目標(biāo)值：

getTarget = function(o){ return o.defaultTarget; }
完成參數(shù)設(shè)置后，再執(zhí)行_easeMove進(jìn)行滑動(dòng)，跟滑動(dòng)展示類似。

reset方法可以重置展示，重置的意思是不進(jìn)行滑動(dòng)而直接移動(dòng)到目標(biāo)值。
如果沒有索引參數(shù)，就會(huì)直接執(zhí)行_defaultMove默認(rèn)值移動(dòng)函數(shù)：

this._setPos( function(o) { return o.defaultTarget; } );
直接把滑動(dòng)元素移動(dòng)到默認(rèn)狀態(tài)。
如果有索引參數(shù)，就先用_setMove根據(jù)索引設(shè)置目標(biāo)值，再執(zhí)行_targetMove直接移動(dòng)到目標(biāo)值。
程序初始化后會(huì)執(zhí)行一次reset，并且以自定義defaultIndex作為參數(shù)。
利用defaultIndex可以一開始就展示對(duì)應(yīng)索引的滑動(dòng)對(duì)象。

【方向模式】

程序可以自定義mode方向模式，有四種方向模式：bottom、top、right、left(默認(rèn))。
其中right和left是在水平方向滑動(dòng)，而bottom和top是在垂直方向滑動(dòng)。
而right和left的區(qū)別是定點(diǎn)方向不同，left以左邊為定點(diǎn)在右邊滑動(dòng)，right就相反。
具體參考實(shí)例就應(yīng)該明白了，bottom和top的區(qū)別也類似。

程序是通過對(duì)不同的方向就修改對(duì)應(yīng)方向的坐標(biāo)樣式來實(shí)現(xiàn)的。
例如left模式就用"left"樣式來做移動(dòng)效果，top模式就用"top"樣式。
初始化程序中設(shè)置的_pos屬性就是用來記錄當(dāng)前模式要使用的坐標(biāo)樣式的：

this._pos = /^(bottom|top|right|left)$/.test( opt.mode.toLowerCase() ) ? RegExp.$1 : "left";
然后在_setPos方法中使用_pos指定的坐標(biāo)樣式來設(shè)置坐標(biāo)值：

var pos = this._pos;
this._each( function(o, i) {
o.node.style[ pos ] = (o.current = Math.round(method.call( this, o ))) + "px";
});

而_horizontal屬性就記錄了是否水平方向滑動(dòng)，即是否right或left。
在計(jì)算尺寸時(shí)，通過它來指定使用用水平還是垂直方向的尺寸。

還有一個(gè)_reverse屬性，判斷是否bottom或right模式。

復(fù)制代碼代碼如下:

 
<div class="container"> 
<div style="right:0;">2</div> 
<div style="right:100px;">1</div> 
<div style="right:200px;">0</div> 
</div> 

但這樣需要修改dom結(jié)構(gòu)，或者通過zIndex設(shè)置堆疊順序：

復(fù)制代碼代碼如下:

 
<div class="container"> 
<div style="right:200px;z-index:3;">0</div> 
<div style="right:100px;z-index:2;">1</div> 
<div style="right:0;z-index:1;">2</div> 
</div> 

顯然設(shè)置zIndex的方法比較好，程序也用了這個(gè)方法。
程序就是用_reverse屬性來判斷是否需要做這些修正。

首先在_initContainer中，根據(jù)_reverse重新設(shè)置zIndex：

復(fù)制代碼代碼如下:

 
var zIndex = 100, gradient = this._reverse ? -1 : 1; 
this._each( function(o){ 
var style = o.node.style; 
style.position = "absolute"; style.zIndex = zIndex += gradient; 
}); 

在_initNodes中，獲取默認(rèn)目標(biāo)值時(shí)也要判斷：

getDefaultTarget = this._reverse
? function(i){ return defaultSize * ( maxIndex - i ); }
: function(i){ return defaultSize * i; },
當(dāng)_reverse為true時(shí)，由于定點(diǎn)位置是在索引的反方向，設(shè)置元素時(shí)也應(yīng)該倒過來設(shè)的，所以要用maxIndex減一下。

在_setMove中，根據(jù)索引設(shè)置滑動(dòng)目標(biāo)值時(shí)，也要判斷：

復(fù)制代碼代碼如下:

 
if ( this._reverse ) { 
var get = getTarget; 
index = maxIndex - index; 
getTarget = function(o, i){ return get( o, maxIndex - i ); } 
} 

不但滑動(dòng)對(duì)象集合的索引要修正，展示對(duì)象的索引也要修正。

【自動(dòng)展示擴(kuò)展】

這次擴(kuò)展用的是組合模式，原理參考的ImageZoom擴(kuò)展篇的擴(kuò)展模式部分。
不同的是加了一個(gè)屬性擴(kuò)展，用來添加擴(kuò)展方法：

$$.extend( this, prototype );
注意不能添加到SlideView.prototype，這樣會(huì)影響到SlideView的結(jié)構(gòu)。

“自動(dòng)展示”要實(shí)現(xiàn)的是滑動(dòng)對(duì)象自動(dòng)輪流展示，并且取消默認(rèn)狀態(tài)而實(shí)行強(qiáng)制展示，可以用在圖片的輪換展示。
只要在SlideView后面加入自動(dòng)展示擴(kuò)展程序，并且auto參數(shù)設(shè)為true就會(huì)啟用。
原理也很簡單，就是每次滑動(dòng)/移動(dòng)完成后，用定時(shí)器執(zhí)行下一次滑動(dòng)就行了。

首先在"init"初始化程序中，增加一個(gè)_NEXT程序，用來展示下一個(gè)滑動(dòng)對(duì)象：

this._NEXT = $$F.bind( function(){ this.show( this._index + 1 ); }, this );
其實(shí)就是把當(dāng)前索引_index加1之后作為show的參數(shù)執(zhí)行。
再增加一個(gè)_autoNext方法：

復(fù)制代碼代碼如下:

 
if ( !this._autoPause ) { 
clearTimeout(this._autoTimer); 
this._autoTimer = setTimeout( this._NEXT, this.autoDelay ); 
} 

作用是延時(shí)執(zhí)行_NEXT程序，并且有一個(gè)_autoPause屬性用來鎖定執(zhí)行。

然后設(shè)置幾個(gè)需要執(zhí)行的地方。
首先在"finish"完成滑動(dòng)事件中，執(zhí)行_autoNext方法，這樣就實(shí)現(xiàn)了基本的自動(dòng)展示了。
在鼠標(biāo)進(jìn)入滑動(dòng)元素后，應(yīng)該停止自動(dòng)切換，所以在"enter"進(jìn)入滑動(dòng)元素事件中，會(huì)清除定時(shí)器并把_autoPause設(shè)為true來鎖定。
對(duì)應(yīng)地在"leave"鼠標(biāo)離開容器事件中，要把_autoPause設(shè)回false解除鎖定，再執(zhí)行_autoNext方法重新啟動(dòng)自動(dòng)程序。
并且在"leave"中設(shè)置autoClose為false，防止自動(dòng)恢復(fù)默認(rèn)狀態(tài)。

最后還要重寫reset：

reset.call( this, index == undefined ? this._index : index );
this._autoNext();
重寫后的reset會(huì)強(qiáng)制設(shè)置索引來展示，并執(zhí)行_autoNext進(jìn)行下一次滑動(dòng)。

【提示信息擴(kuò)展】

“提示信息”效果是指每個(gè)滑動(dòng)對(duì)象對(duì)應(yīng)有一個(gè)提示信息（內(nèi)容）的層（元素）。
這個(gè)提示信息會(huì)在滑動(dòng)對(duì)象展示時(shí)展示，收縮和關(guān)閉時(shí)關(guān)閉。
只要加入提示信息擴(kuò)展程序，并且tip參數(shù)設(shè)為true就會(huì)啟用。

提示擴(kuò)展支持四種位置提示：bottom、top、right、left。
在"init"中，根據(jù)自定義tipMode獲取_tipPos坐標(biāo)樣式：

this._tipPos = /^(bottom|top|right|left)$/.test( this.options.tipPos.toLowerCase() ) ? RegExp.$1 : "bottom";

接著在"initNodes"定義一個(gè)能根據(jù)滑動(dòng)元素獲取提示元素的函數(shù)：

復(fù)制代碼代碼如下:

 
var opt = this.options, tipTag = opt.tipTag, tipClass = opt.tipClass, 
re = tipClass && new RegExp("(^|\\s)" + tipClass + "(\\s|$)"), 
getTipNode = function(node){ 
var nodes = node.getElementsByTagName( tipTag ); 
if ( tipClass ) { 
nodes = $$A.filter( nodes, function(n){ return re.test(n.className); } ); 
} 
return nodes[0]; 
}; 

如果自定義了tipTag，就會(huì)根據(jù)標(biāo)簽來獲取元素，否則就按默認(rèn)值"*"獲取全部元素。
如果自定義了tipClass，就會(huì)再根據(jù)className來篩選元素，注意可能包含多個(gè)樣式，不能直接等于。

得到函數(shù)后，再創(chuàng)建提示對(duì)象：

復(fù)制代碼代碼如下:

 
this._each( function(o) { 
var node = o.node, tipNode = getTipNode(node); 
node.style.overflow = "hidden"; 
tipNode.style.position = "absolute"; tipNode.style.left = 0; 

o.tip = { 
"node": tipNode, 
"show": tipShow != undefined ? tipShow : 0, 
"close": tipClose != undefined ? tipClose : -tipNode[offset] 
}; 
}); 

先獲取提示元素，并設(shè)置相關(guān)樣式，再給滑動(dòng)對(duì)象添加一個(gè)tip屬性，保存對(duì)應(yīng)的提示對(duì)象。
其中"node"屬性保存提示元素，"show"是展示時(shí)的坐標(biāo)值，"close"是關(guān)閉時(shí)的坐標(biāo)值。
如果沒有自定義tipShow，默認(rèn)展示時(shí)坐標(biāo)值是0，即提示元素剛好貼在滑動(dòng)元素邊上的位置；
如果沒有自定義tipClose，默認(rèn)關(guān)閉時(shí)坐標(biāo)是提示元素的尺寸，即提示元素剛好隱藏在滑動(dòng)元素外面的位置。

在"setMove"中設(shè)置提示移動(dòng)目標(biāo)值：

復(fù)制代碼代碼如下:

 
var maxIndex = this._nodes.length - 1; 
this._each( function(o, i) { 
var tip = o.tip; 
if ( this._reverse ) { i = maxIndex -i; } 
tip.target = index == undefined || index != i ? tip.close : tip.show; 
tip.begin = tip.current; tip.change = tip.target - tip.begin; 
}); 

這個(gè)比滑動(dòng)對(duì)象的設(shè)置簡單得多，當(dāng)設(shè)置了index參數(shù)，并且index等于該滑動(dòng)對(duì)象的索引時(shí)才需要展示，其他情況都是隱藏。
要注意，跟滑動(dòng)對(duì)象一樣，在_reverse為true的時(shí)候需要修正索引。
在"tweenMove"、"targetMove"、"defaultMove"也要設(shè)置對(duì)應(yīng)的移動(dòng)函數(shù)。

為了方便樣式設(shè)置，擴(kuò)展了一個(gè)_setTipPos方法：

復(fù)制代碼代碼如下:

 
var pos = this._tipPos; 
this._each( function(o, i) { 
var tip = o.tip; 
tip.node.style[ pos ] = (tip.current = method.call( this, tip )) + "px"; 
}); 

根據(jù)_tipPos坐標(biāo)樣式來設(shè)置坐標(biāo)值。

使用技巧

【展示尺寸】

要自定義展示尺寸可以通過max和min來設(shè)置，可以按像素或百分比來計(jì)算。
如果不設(shè)置的話，就會(huì)按照元素本身的尺寸來展示。
所以滑動(dòng)元素展示的尺寸并不需要一致的，程序可以自動(dòng)計(jì)算。

【Accordion效果】

Accordion是可折疊的面板控件，效果類似手風(fēng)琴，SlideView通過設(shè)置也能做到類似的效果。
首先把a(bǔ)utoClose設(shè)為false取消自動(dòng)關(guān)閉，再設(shè)置defaultIndex，使SlideView處于展開狀態(tài)不會(huì)關(guān)閉。
一般Accordion都有一個(gè)固定尺寸的標(biāo)題，這個(gè)可以用min來設(shè)置。
這樣就實(shí)現(xiàn)了簡單的Accordion效果，具體參考第三個(gè)實(shí)例。

使用說明

實(shí)例化時(shí)，必須有容器對(duì)象或id作為參數(shù)：

new SlideView( "idSlideView" );

可選參數(shù)用來設(shè)置系統(tǒng)的默認(rèn)屬性，包括：
屬性: 默認(rèn)值//說明
nodes: null,//自定義展示元素集合
mode: "left",//方向
max: 0,//展示尺寸(像素或百分比)
min: 0,//收縮尺寸(像素或百分比)
delay: 100,//觸發(fā)延時(shí)
interval: 20,//滑動(dòng)間隔
duration: 20,//滑動(dòng)持續(xù)時(shí)間
defaultIndex: null,//默認(rèn)展示索引
autoClose: true,//是否自動(dòng)恢復(fù)
tween: function(t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) + b; },//tween算子
onShow: function(index){},//滑動(dòng)展示時(shí)執(zhí)行
onClose: function(){}//滑動(dòng)關(guān)閉執(zhí)行
其中interval、delay、duration、tween、autoClose、onShow、onClose屬性可以在程序初始化后動(dòng)態(tài)設(shè)置。

還提供了以下方法：
show：根據(jù)索引滑動(dòng)展示；
close：滑動(dòng)到默認(rèn)狀態(tài)；
reset：重置為默認(rèn)狀態(tài)或展開索引對(duì)應(yīng)滑動(dòng)對(duì)象；
dispose：銷毀程序。

要使用自動(dòng)展示，只要在SlideView后面加入自動(dòng)展示擴(kuò)展程序，并且auto參數(shù)設(shè)為true即可。
新增如下可選參數(shù)：
autoDelay: 2000//展示時(shí)間

要使用提示信息，只要加入提示信息擴(kuò)展程序，并且tip參數(shù)設(shè)為true即可。
新增如下可選參數(shù)：
屬性: 默認(rèn)值//說明
tipPos: "bottom",//提示位置
tipTag: "*",//提示元素標(biāo)簽
tipClass: "",//提示元素樣式
tipShow: null,//展示時(shí)目標(biāo)坐標(biāo)
tipClose: null//關(guān)閉時(shí)目標(biāo)坐標(biāo)

程序源碼

復(fù)制代碼代碼如下:

 
var SlideView = function(container, options){ 
this._initialize( container, options ); 
this._initContainer(); 
this._initNodes(); 
this.reset( this.options.defaultIndex ); 
}; 
SlideView.prototype = { 
//初始化程序 
_initialize: function(container, options) { 

var container = this._container = $$(container);//容器對(duì)象 
this._timerDelay = null;//延遲計(jì)時(shí)器 
this._timerMove = null;//移動(dòng)計(jì)時(shí)器 
this._time = 0;//時(shí)間 
this._index = 0;//索引 

var opt = this._setOptions(options); 

this.interval = opt.interval | 0; 
this.delay = opt.delay | 0; 
this.duration = opt.duration | 0; 
this.tween = opt.tween; 
this.autoClose = !!opt.autoClose; 
this.onShow = opt.onShow; 
this.onClose = opt.onClose; 

//設(shè)置參數(shù) 
var pos =this._pos = /^(bottom|top|right|left)$/.test( opt.mode.toLowerCase() ) ? RegExp.$1 : "left"; 
this._horizontal = /right|left/.test( this._pos ); 
this._reverse = /bottom|right/.test( this._pos ); 

//獲取滑動(dòng)元素 
var nodes = opt.nodes ? $$A.map( opt.nodes, function(n) { return n; } ) 
: $$A.filter( container.childNodes, function(n) { return n.nodeType == 1; }); 
//創(chuàng)建滑動(dòng)對(duì)象集合 
this._nodes = $$A.map( nodes, function(node){ 
var style = node.style; 
return { "node": node, "style": style[pos], "position": style.position, "zIndex": style.zIndex }; 
}); 

//設(shè)置程序 
this._MOVE = $$F.bind( this._move, this ); 

var CLOSE = $$F.bind( this.close, this ); 
this._LEAVE = $$F.bind( function(){ 
clearTimeout(this._timerDelay); 
$$CE.fireEvent( this, "leave" ); 
if ( this.autoClose ) { this._timerDelay = setTimeout( CLOSE, this.delay ); } 
}, this ); 

$$CE.fireEvent( this, "init" ); 
}, 
//設(shè)置默認(rèn)屬性 
_setOptions: function(options) { 
this.options = {//默認(rèn)值 
nodes: null,//自定義展示元素集合 
mode: "left",//方向 
max: 0,//展示尺寸(像素或百分比) 
min: 0,//收縮尺寸(像素或百分比) 
delay: 100,//觸發(fā)延時(shí) 
interval: 20,//滑動(dòng)間隔 
duration: 20,//滑動(dòng)持續(xù)時(shí)間 
defaultIndex: null,//默認(rèn)展示索引 
autoClose: true,//是否自動(dòng)恢復(fù) 
tween: function(t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) + b; },//tween算子 
onShow: function(index){},//滑動(dòng)展示時(shí)執(zhí)行 
onClose: function(){}//滑動(dòng)關(guān)閉執(zhí)行 
}; 
return $$.extend(this.options, options || {}); 
}, 
//設(shè)置容器 
_initContainer: function() { 
//容器樣式設(shè)置 
var container = this._container, style = container.style, position = $$D.getStyle( container, "position" ); 
this._style = { "position": style.position, "overflow": style.overflow };//備份樣式 
if ( position != "relative" && position != "absolute" ) { style.position = "relative"; } 
style.overflow = "hidden"; 
//移出容器時(shí) 
$$E.addEvent( container, "mouseleave", this._LEAVE ); 
//設(shè)置滑動(dòng)元素 
var zIndex = 100, gradient = this._reverse ? -1 : 1; 
this._each( function(o){ 
var style = o.node.style; 
style.position = "absolute"; style.zIndex = zIndex += gradient; 
}); 

$$CE.fireEvent( this, "initContainer" ); 
}, 
//設(shè)置滑動(dòng)對(duì)象 
_initNodes: function() { 
var len = this._nodes.length, maxIndex = len - 1, 
type = this._horizontal ? "Width" : "Height", offset = "offset" + type, 
clientSize = this._container[ "client" + type ], 
defaultSize = Math.round( clientSize / len ), 
//計(jì)算默認(rèn)目標(biāo)值的函數(shù) 
getDefaultTarget = this._reverse 
? function(i){ return defaultSize * ( maxIndex - i ); } 
: function(i){ return defaultSize * i; }, 
max = this.options.max, min = this.options.min, getMax, getMin; 
//設(shè)置參數(shù)函數(shù) 
if ( max > 0 || min > 0 ) {//自定義參數(shù)值 
//小數(shù)按百分比設(shè)置 
if ( max > 0 ) { 
max = Math.max( max <= 1 ? max * clientSize : Math.min( max, clientSize ), defaultSize ); 
min = ( clientSize - max ) / maxIndex; 
} else { 
min = Math.min( min < 1 ? min * clientSize : min, defaultSize ); 
max = clientSize - maxIndex * min; 
} 
getMax = function(){ return max; }; 
getMin = function(){ return min; }; 
} else {//根據(jù)元素尺寸設(shè)置參數(shù)值 
getMax = function(o){ return Math.max( Math.min( o.node[ offset ], clientSize ), defaultSize ); }; 
getMin = function(o){ return ( clientSize - o.max ) / maxIndex; }; 
} 

//設(shè)置滑動(dòng)對(duì)象 
this._each( function(o, i){ 
//移入滑動(dòng)元素時(shí)執(zhí)行程序 
var node = o.node, SHOW = $$F.bind( this.show, this, i ); 
o.SHOW = $$F.bind( function(){ 
clearTimeout(this._timerDelay); 
this._timerDelay = setTimeout( SHOW, this.delay ); 
$$CE.fireEvent( this, "enter", i ); 
}, this ); 
$$E.addEvent( node, "mouseenter", o.SHOW ); 
//計(jì)算尺寸 
o.current = o.defaultTarget = getDefaultTarget(i);//默認(rèn)目標(biāo)值 
o.max = getMax(o); o.min = getMin(o); 
}); 

$$CE.fireEvent( this, "initNodes" ); 
}, 

//根據(jù)索引滑動(dòng)展示 
show: function(index) { 
this._setMove( index | 0 ); 
this.onShow( this._index ); 
this._easeMove(); 
}, 
//滑動(dòng)到默認(rèn)狀態(tài) 
close: function() { 
this._setMove(); 
this.onClose(); 
this._easeMove(); 
}, 
//重置為默認(rèn)狀態(tài)或展開索引對(duì)應(yīng)滑動(dòng)對(duì)象 
reset: function(index) { 
clearTimeout(this._timerDelay); 
if ( index == undefined ) { 
this._defaultMove(); 
} else { 
this._setMove(index); 
this.onShow( this._index ); 
this._targetMove(); 
} 
}, 

//設(shè)置滑動(dòng)參數(shù) 
_setMove: function(index) { 
var setTarget;//設(shè)置目標(biāo)值函數(shù) 
if ( index == undefined ) {//設(shè)置默認(rèn)狀態(tài)目標(biāo)值 
getTarget = function(o){ return o.defaultTarget; } 
} else {//根據(jù)索引設(shè)置滑動(dòng)目標(biāo)值 
var nodes = this._nodes, maxIndex = nodes.length - 1; 
//設(shè)置索引 
this._index = index = index < 0 || index > maxIndex ? 0 : index | 0; 
//設(shè)置展示參數(shù) 
var nodeShow = nodes[ index ], min = nodeShow.min, max = nodeShow.max; 
getTarget = function(o, i){ return i <= index ? min * i : min * ( i - 1 ) + max; }; 
if ( this._reverse ) { 
var get = getTarget; 
index = maxIndex - index; 
getTarget = function(o, i){ return get( o, maxIndex - i ); } 
} 
} 
this._each( function(o, i){ 
o.target = getTarget(o, i);//設(shè)置目標(biāo)值 
o.begin = o.current;//設(shè)置開始值 
o.change = o.target - o.begin;//設(shè)置變化值 
}); 
$$CE.fireEvent( this, "setMove", index ); 
}, 

//滑移程序 
_easeMove: function() { 
this._time = 0; this._move(); 
}, 
//移動(dòng)程序 
_move: function() { 
if ( this._time < this.duration ){//未到達(dá) 
this._tweenMove(); 
this._time++; 
this._timerMove = setTimeout( this._MOVE, this.interval ); 
} else {//完成 
this._targetMove();//防止計(jì)算誤差 
$$CE.fireEvent( this, "finish" ); 
} 
}, 

//tween移動(dòng)函數(shù) 
_tweenMove: function() { 
this._setPos( function(o) { 
return this.tween( this._time, o.begin, o.change, this.duration ); 
}); 
$$CE.fireEvent( this, "tweenMove" ); 
}, 
//目標(biāo)值移動(dòng)函數(shù) 
_targetMove: function() { 
this._setPos( function(o) { return o.target; } ); 
$$CE.fireEvent( this, "targetMove" ); 
}, 
//默認(rèn)值移動(dòng)函數(shù) 
_defaultMove: function() { 
this._setPos( function(o) { return o.defaultTarget; } ); 
$$CE.fireEvent( this, "defaultMove" ); 
}, 
//設(shè)置坐標(biāo)值 
_setPos: function(method) { 
clearTimeout(this._timerMove); 
var pos = this._pos; 
this._each( function(o, i) { 
o.node.style[ pos ] = (o.current = Math.round(method.call( this, o ))) + "px"; 
}); 
}, 

//歷遍滑動(dòng)對(duì)象集合 
_each: function(callback) { 
$$A.forEach( this._nodes, callback, this ); 
}, 

//銷毀程序 
dispose: function() { 
clearTimeout(this._timerDelay); 
clearTimeout(this._timerMove); 

$$CE.fireEvent( this, "dispose" ); 

var pos = this._pos; 
this._each( function(o) { 
var style = o.node.style; 
style[pos] = o.style; style.zIndex = o.zIndex; style.position = o.position;//恢復(fù)樣式 
$$E.removeEvent( o.node, "mouseenter", o.SHOW ); o.SHOW = o.node = null; 
}); 
$$E.removeEvent( this._container, "mouseleave", this._LEAVE ); 

$$D.setStyle( this._container, this._style ); 

this._container = this._nodes = this._MOVE = this._LEAVE = null; 
$$CE.clearEvent( this ); 
} 
}; 

自動(dòng)展示擴(kuò)展

復(fù)制代碼代碼如下:

 
SlideView.prototype._initialize = (function(){ 
var init = SlideView.prototype._initialize, 
reset = SlideView.prototype.reset, 
methods = { 
"init": function(){ 
this.autoDelay = this.options.autoDelay | 0; 

this._autoTimer = null;//定時(shí)器 
this._autoPause = false;//暫停自動(dòng)展示 
//展示下一個(gè)滑動(dòng)對(duì)象 
this._NEXT = $$F.bind( function(){ this.show( this._index + 1 ); }, this ); 
}, 
"leave": function(){ 
this.autoClose = this._autoPause = false; 
this._autoNext(); 
}, 
"enter": function(){ 
clearTimeout(this._autoTimer); 
this._autoPause = true; 
}, 
"finish": function(){ 
this._autoNext(); 
}, 
"dispose": function(){ 
clearTimeout(this._autoTimer); 
} 
}, 
prototype = { 
_autoNext: function(){ 
if ( !this._autoPause ) { 
clearTimeout(this._autoTimer); 
this._autoTimer = setTimeout( this._NEXT, this.autoDelay ); 
} 
}, 
reset: function(index) { 
reset.call( this, index == undefined ? this._index : index ); 
this._autoNext(); 
} 
}; 
return function(){ 
var options = arguments[1]; 
if ( options && options.auto ) { 
//擴(kuò)展options 
$$.extend( options, { 
autoDelay: 2000//展示時(shí)間 
}, false ); 
//擴(kuò)展屬性 
$$.extend( this, prototype ); 
//擴(kuò)展鉤子 
$$A.forEach( methods, function( method, name ){ 
$$CE.addEvent( this, name, method ); 
}, this ); 
} 
init.apply( this, arguments ); 
} 
})(); 

提示信息擴(kuò)展

復(fù)制代碼代碼如下:

 
SlideView.prototype._initialize = (function(){ 
var init = SlideView.prototype._initialize, 
methods = { 
"init": function(){ 
//坐標(biāo)樣式 
this._tipPos = /^(bottom|top|right|left)$/.test( this.options.tipPos.toLowerCase() ) ? RegExp.$1 : "bottom"; 
}, 
"initNodes": function(){ 
var opt = this.options, tipTag = opt.tipTag, tipClass = opt.tipClass, 
re = tipClass && new RegExp("(^|\\s)" + tipClass + "(\\s|$)"), 
getTipNode = function(node){ 
var nodes = node.getElementsByTagName( tipTag ); 
if ( tipClass ) { 
nodes = $$A.filter( nodes, function(n){ return re.test(n.className); } ); 
} 
return nodes[0]; 
}; 
//設(shè)置提示對(duì)象 
var tipShow = opt.tipShow, tipClose = opt.tipClose, 
offset = /right|left/.test( this._tipPos ) ? "offsetWidth" : "offsetHeight"; 
this._each( function(o) { 
var node = o.node, tipNode = getTipNode(node); 
node.style.overflow = "hidden"; 
tipNode.style.position = "absolute"; tipNode.style.left = 0; 
//創(chuàng)建提示對(duì)象 
o.tip = { 
"node": tipNode, 
"show": tipShow != undefined ? tipShow : 0, 
"close": tipClose != undefined ? tipClose : -tipNode[offset] 
}; 
}); 
}, 
"setMove": function(index){ 
var maxIndex = this._nodes.length - 1; 
this._each( function(o, i) { 
var tip = o.tip; 
if ( this._reverse ) { i = maxIndex -i; } 
tip.target = index == undefined || index != i ? tip.close : tip.show; 
tip.begin = tip.current; tip.change = tip.target - tip.begin; 
}); 
}, 
"tweenMove": function(){ 
this._setTipPos( function(tip) { 
return Math.round( this.tween( this._time, tip.begin, tip.change, this.duration ) ); 
}); 
}, 
"targetMove": function(){ 
this._setTipPos( function(tip){ return tip.target; }); 
}, 
"defaultMove": function(){ 
this._setTipPos( function(tip){ return tip.close; }); 
}, 
"dispose": function(){ 
this._each( function(o){ o.tip = null; }); 
} 
}, 
prototype = { 
//設(shè)置坐標(biāo)值函數(shù) 
_setTipPos: function(method) { 
var pos = this._tipPos; 
this._each( function(o, i) { 
var tip = o.tip; 
tip.node.style[ pos ] = (tip.current = method.call( this, tip )) + "px"; 
}); 
} 
}; 
return function(){ 
var options = arguments[1]; 
if ( options && options.tip == true ) { 
//擴(kuò)展options 
$$.extend( options, { 
tipPos: "bottom",//提示位置 
tipTag: "*",//提示元素標(biāo)簽 
tipClass: "",//提示元素樣式 
tipShow: null,//展示時(shí)目標(biāo)坐標(biāo) 
tipClose: null//關(guān)閉時(shí)目標(biāo)坐標(biāo) 
}, false ); 
//擴(kuò)展屬性 
$$.extend( this, prototype ); 
//擴(kuò)展鉤子 
$$A.forEach( methods, function( method, name ){ 
$$CE.addEvent( this, name, method ); 
}, this ); 
} 
init.apply( this, arguments ); 
} 
})(); 