這個其實就是以前寫的圖片滑動展示效果的改進版，那是我第一篇比較受關注的文章，是時候整理一下了。
有如下特色：
1，有四種方向模式選擇；
2，結合tween算法實現多種滑動效果；
3，能自動根據滑動元素計算展示尺寸；
4，也可自定義展示或收縮尺寸；
5，可擴展自動切換功能；
6，可擴展滑動提示功能。
兼容：ie6/7/8, firefox 3.6.8, opera 10.51, safari 4.0.5, chrome 5.0
程序說明
【基本原理】
通過設置滑動元素的位置坐標(left/right/top/bottom)，實現鼠標進入的目標元素滑動展示，其他元素滑動收縮的效果。
難點是如何控制多個滑動元素同時進行不同的滑動，這裡關鍵就在於把整體滑動分解成各個滑動元素進行各自的滑動。
方法是給各個滑動元素設置目標值，然後各自向自己的目標值滑動，當全部都到達目標值就完成了。
【容器設置】
在_initContainer方法中進行容器設置，由於後面滑動參數的計算要用到容器，所以要先設置容器。
先設置容器樣式，要實現滑動需要設置容器相對或絕對定位，並且設置overflow為"hidden"來固定容器大小，而滑動元素也要設置絕對定位。
鼠標移出容器時會觸發_LEAVE移出函數：
$$E.addEvent( container, "mouseleave", this._LEAVE );
其中_LEAVE函數是這樣的：
代碼
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 );
當autoClose屬性為true時才會延時觸發close方法。
【滑動對象】
程序初始化時會根據滑動元素創建滑動對象集合。
先獲取滑動元素：
var nodes = opt.nodes ? $$A.map( opt.nodes, function(n) { return n; } )
: $$A.filter( container.childNodes, function(n) { return n.nodeType == 1; });
如果沒有自定義nodes滑動元素，就從容器獲取childNodes作為滑動元素。
還要用nodeType篩選一下，因為ie外的浏覽器都會把空格作為childNodes的一部分。
接著用獲取的滑動元素生成程序需要的_nodes滑動對象集合：
this._nodes = $$A.map( nodes, function(node){ return { "node": node }; });
滑動對象用"node"屬性記錄滑動元素。
然後在_initNodes方法中初始化滑動對象。
每個滑動對象都有3個用來計算滑動目標值的屬性：defaultTarget默認目標值，max展示尺寸，min收縮尺寸。
如果有自定義max尺寸或min尺寸，會根據自定義的尺寸來計算。
程序會優先按max來計算：
max = Math.max( max <= 1 ? max * clientSize : Math.min( max, clientSize ), defaultSize );
min = ( clientSize - max ) / maxIndex;
其中clientSize是容器的可見區域尺寸，defaultSize是平均分配尺寸。
如果max是小數或1就按百分比計算，再把尺寸限制在defaultSize到clientSize的范圍內。
再計算減去max後其他收縮元素的平均尺寸，就可以得到min了。
如果沒有自定義max再按自定義min來計算：
min = Math.min( min < 1 ? min * clientSize : min, defaultSize );
max = clientSize - maxIndex * min;
同樣，如果min是小數就按百分比計算，再做范圍限制，然後計算得出max。
最後得到自定義尺寸計算函數：
getMax = function(){ return max; };
getMin = function(){ return min; };
如果沒有自定義max或min，就根據元素尺寸來計算：
getMax = function(o){ return Math.max( Math.min( o.node[ offset ], clientSize ), defaultSize ); };
getMin = function(o){ return ( clientSize - o.max ) / maxIndex; };
把元素尺寸作為展示尺寸來計算，同樣要做范圍限制，然後計算收縮尺寸。
得到尺寸計算函數後，再用_each方法歷遍並設置滑動對象：
o.current = o.defaultTarget = getDefaultTarget(i);
o.max = getMax(o); o.min = getMin(o);
其中current是當前坐標值，在移動計算時作為開始值的。
而defaultTarget是默認目標值，即默認狀態時移動的目標值，根據defaultSize和索引得到。
還要設置當鼠標進入滑動元素時觸發show展示函數：
代碼
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 );
要在滑動元素的"mouseenter"事件中觸發，並傳遞當前滑動對象的索引，再加上延時設置就可以了。
【滑動展示】
當鼠標進入其中一個滑動元素，就會觸發show方法開始展示。
首先執行_setMove方法設置滑動參數，並以索引作為參數。
在_setMove裡面主要是設置計算移動值時需要的目標值、開始值和變化值。
先修正索引，錯誤的索引值會設置為0：
this._index = index = index < 0 || index > maxIndex ? 0 : index | 0;
再根據索引獲取要展示的滑動對象，通過展示對象的min和max得到getTarget目標值函數：
var nodeShow = nodes[ index ], min = nodeShow.min, max = nodeShow.max;
getTarget = function(o, i){ return i <= index ? min * i : min * ( i - 1 ) + max; };
如果滑動對象就是展示對象或者在展示對象前面，目標值就是min * i，因為第i+1個滑動對象的目標值就是i個min的大小。
否則，目標值就是min * ( i - 1 ) + max，其實就是把展示對象的位置換成max。
然後設置每個滑動對象的參數屬性：
this._each( function(o, i){
o.target = getTarget(o, i);
o.begin = o.current;
o.change = o.target - o.begin;
});
其中target記錄目標值，begin通過current得到開始值，目標值和開始值的差就是change改變值。
設置完成後，就執行_easeMove方法開始滑移，在裡面重置_time屬性為0，再就執行_move程序就正式開始移動了。
首先判斷_time是否到達duration持續時間，沒有到達的話，就繼續移動。
程序設置了一個_tweenMove移動函數，用來設置緩動：
this._setPos( function(o) {
return this.tween( this._time, o.begin, o.change, this.duration );
});
利用tween算法，結合當前時間，開始值，改變值和持續時間，就能得到當前要移動的坐標值。
ps：關於tween緩動可以參考tween算法及緩動效果。
當_time到達duration說明滑動已經完成，再執行一次_targetMove目標值移動函數：
this._setPos( function(o) { return o.target; } );
直接移動到目標值，可以防止可能出現的計算誤差導致移位不准確。
【關閉和重置】
close方法可以關閉展示，即滑動到默認狀態，默認在移出容器時就會執行。
默認狀態是指全部滑動元素位於defaultTarget默認目標值的狀態。
先用_setMove設置移動參數，當_setMove沒有索引參數時，就會設置目標值為默認目標值：
getTarget = function(o){ return o.defaultTarget; }
完成參數設置後，再執行_easeMove進行滑動，跟滑動展示類似。
reset方法可以重置展示，重置的意思是不進行滑動而直接移動到目標值。
如果沒有索引參數，就會直接執行_defaultMove默認值移動函數：
this._setPos( function(o) { return o.defaultTarget; } );
直接把滑動元素移動到默認狀態。
如果有索引參數，就先用_setMove根據索引設置目標值，再執行_targetMove直接移動到目標值。
程序初始化後會執行一次reset，並且以自定義defaultIndex作為參數。
利用defaultIndex可以一開始就展示對應索引的滑動對象。
【方向模式】
程序可以自定義mode方向模式，有四種方向模式：bottom、top、right、left(默認)。
其中right和left是在水平方向滑動，而bottom和top是在垂直方向滑動。
而right和left的區別是定點方向不同，left以左邊為定點在右邊滑動，right就相反。
具體參考實例就應該明白了，bottom和top的區別也類似。
程序是通過對不同的方向就修改對應方向的坐標樣式來實現的。
例如left模式就用"left"樣式來做移動效果，top模式就用"top"樣式。
初始化程序中設置的_pos屬性就是用來記錄當前模式要使用的坐標樣式的：
this._pos = /^(bottom|top|right|left)$/.test( opt.mode.toLowerCase() ) ? RegExp.$1 : "left";
然後在_setPos方法中使用_pos指定的坐標樣式來設置坐標值：
var pos = this._pos;
this._each( function(o, i) {
o.node.style[ pos ] = (o.current = Math.round(method.call( this, o ))) + "px";
});
而_horizontal屬性就記錄了是否水平方向滑動，即是否right或left。
在計算尺寸時，通過它來指定使用用水平還是垂直方向的尺寸。
還有一個_reverse屬性，判斷是否bottom或right模式。
復制代碼 代碼如下:
<div class="container">
<div style="right:0;">2</div>
<div style="right:100px;">1</div>
<div style="right:200px;">0</div>
</div>
但這樣需要修改dom結構，或者通過zIndex設置堆疊順序：
復制代碼 代碼如下:
<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>
顯然設置zIndex的方法比較好，程序也用了這個方法。
程序就是用_reverse屬性來判斷是否需要做這些修正。
首先在_initContainer中，根據_reverse重新設置zIndex：
復制代碼 代碼如下:
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中，獲取默認目標值時也要判斷：
getDefaultTarget = this._reverse
? function(i){ return defaultSize * ( maxIndex - i ); }
: function(i){ return defaultSize * i; },
當_reverse為true時，由於定點位置是在索引的反方向，設置元素時也應該倒過來設的，所以要用maxIndex減一下。
在_setMove中，根據索引設置滑動目標值時，也要判斷：
復制代碼 代碼如下:
if ( this._reverse ) {
var get = getTarget;
index = maxIndex - index;
getTarget = function(o, i){ return get( o, maxIndex - i ); }
}
不但滑動對象集合的索引要修正，展示對象的索引也要修正。
【自動展示擴展】
這次擴展用的是組合模式，原理參考的ImageZoom擴展篇的擴展模式部分。
不同的是加了一個屬性擴展，用來添加擴展方法：
$$.extend( this, prototype );
注意不能添加到SlideView.prototype，這樣會影響到SlideView的結構。
“自動展示”要實現的是滑動對象自動輪流展示，並且取消默認狀態而實行強制展示，可以用在圖片的輪換展示。
只要在SlideView後面加入自動展示擴展程序，並且auto參數設為true就會啟用。
原理也很簡單，就是每次滑動/移動完成後，用定時器執行下一次滑動就行了。
首先在"init"初始化程序中，增加一個_NEXT程序，用來展示下一個滑動對象：
this._NEXT = $$F.bind( function(){ this.show( this._index + 1 ); }, this );
其實就是把當前索引_index加1之後作為show的參數執行。
再增加一個_autoNext方法：
復制代碼 代碼如下:
if ( !this._autoPause ) {
clearTimeout(this._autoTimer);
this._autoTimer = setTimeout( this._NEXT, this.autoDelay );
}
作用是延時執行_NEXT程序，並且有一個_autoPause屬性用來鎖定執行。
然後設置幾個需要執行的地方。
首先在"finish"完成滑動事件中，執行_autoNext方法，這樣就實現了基本的自動展示了。
在鼠標進入滑動元素後，應該停止自動切換，所以在"enter"進入滑動元素事件中，會清除定時器並把_autoPause設為true來鎖定。
對應地在"leave"鼠標離開容器事件中，要把_autoPause設回false解除鎖定，再執行_autoNext方法重新啟動自動程序。
並且在"leave"中設置autoClose為false，防止自動恢復默認狀態。
最後還要重寫reset：
reset.call( this, index == undefined ? this._index : index );
this._autoNext();
重寫後的reset會強制設置索引來展示，並執行_autoNext進行下一次滑動。
【提示信息擴展】
“提示信息”效果是指每個滑動對象對應有一個提示信息（內容）的層（元素）。
這個提示信息會在滑動對象展示時展示，收縮和關閉時關閉。
只要加入提示信息擴展程序，並且tip參數設為true就會啟用。
提示擴展支持四種位置提示：bottom、top、right、left。
在"init"中，根據自定義tipMode獲取_tipPos坐標樣式：
this._tipPos = /^(bottom|top|right|left)$/.test( this.options.tipPos.toLowerCase() ) ? RegExp.$1 : "bottom";
接著在"initNodes"定義一個能根據滑動元素獲取提示元素的函數：
復制代碼 代碼如下:
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，就會根據標簽來獲取元素，否則就按默認值"*"獲取全部元素。
如果自定義了tipClass，就會再根據className來篩選元素，注意可能包含多個樣式，不能直接等於。
得到函數後，再創建提示對象：
復制代碼 代碼如下:
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]
};
});
先獲取提示元素，並設置相關樣式，再給滑動對象添加一個tip屬性，保存對應的提示對象。
其中"node"屬性保存提示元素，"show"是展示時的坐標值，"close"是關閉時的坐標值。
如果沒有自定義tipShow，默認展示時坐標值是0，即提示元素剛好貼在滑動元素邊上的位置；
如果沒有自定義tipClose，默認關閉時坐標是提示元素的尺寸，即提示元素剛好隱藏在滑動元素外面的位置。
在"setMove"中設置提示移動目標值：
復制代碼 代碼如下:
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;
});
這個比滑動對象的設置簡單得多，當設置了index參數，並且index等於該滑動對象的索引時才需要展示，其他情況都是隱藏。
要注意，跟滑動對象一樣，在_reverse為true的時候需要修正索引。
在"tweenMove"、"targetMove"、"defaultMove"也要設置對應的移動函數。
為了方便樣式設置，擴展了一個_setTipPos方法：
復制代碼 代碼如下:
var pos = this._tipPos;
this._each( function(o, i) {
var tip = o.tip;
tip.node.style[ pos ] = (tip.current = method.call( this, tip )) + "px";
});
根據_tipPos坐標樣式來設置坐標值。
使用技巧
【展示尺寸】
要自定義展示尺寸可以通過max和min來設置，可以按像素或百分比來計算。
如果不設置的話，就會按照元素本身的尺寸來展示。
所以滑動元素展示的尺寸並不需要一致的，程序可以自動計算。
【Accordion效果】
Accordion是可折疊的面板控件，效果類似手風琴，SlideView通過設置也能做到類似的效果。
首先把autoClose設為false取消自動關閉，再設置defaultIndex，使SlideView處於展開狀態不會關閉。
一般Accordion都有一個固定尺寸的標題，這個可以用min來設置。
這樣就實現了簡單的Accordion效果，具體參考第三個實例。
使用說明
實例化時，必須有容器對象或id作為參數：
new SlideView( "idSlideView" );
可選參數用來設置系統的默認屬性，包括：
屬性: 默認值//說明
nodes: null,//自定義展示元素集合
mode: "left",//方向
max: 0,//展示尺寸(像素或百分比)
min: 0,//收縮尺寸(像素或百分比)
delay: 100,//觸發延時
interval: 20,//滑動間隔
duration: 20,//滑動持續時間
defaultIndex: null,//默認展示索引
autoClose: true,//是否自動恢復
tween: function(t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) + b; },//tween算子
onShow: function(index){},//滑動展示時執行
onClose: function(){}//滑動關閉執行
其中interval、delay、duration、tween、autoClose、onShow、onClose屬性可以在程序初始化後動態設置。
還提供了以下方法：
show：根據索引滑動展示；
close：滑動到默認狀態；
reset：重置為默認狀態或展開索引對應滑動對象；
dispose：銷毀程序。
要使用自動展示，只要在SlideView後面加入自動展示擴展程序，並且auto參數設為true即可。
新增如下可選參數：
autoDelay: 2000//展示時間
要使用提示信息，只要加入提示信息擴展程序，並且tip參數設為true即可。
新增如下可選參數：
屬性: 默認值//說明
tipPos: "bottom",//提示位置
tipTag: "*",//提示元素標簽
tipClass: "",//提示元素樣式
tipShow: null,//展示時目標坐標
tipClose: null//關閉時目標坐標
程序源碼
復制代碼 代碼如下:
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);//容器對象
this._timerDelay = null;//延遲計時器
this._timerMove = null;//移動計時器
this._time = 0;//時間
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;
//設置參數
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 );
//獲取滑動元素
var nodes = opt.nodes ? $$A.map( opt.nodes, function(n) { return n; } )
: $$A.filter( container.childNodes, function(n) { return n.nodeType == 1; });
//創建滑動對象集合
this._nodes = $$A.map( nodes, function(node){
var style = node.style;
return { "node": node, "style": style[pos], "position": style.position, "zIndex": style.zIndex };
});
//設置程序
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" );
},
//設置默認屬性
_setOptions: function(options) {
this.options = {//默認值
nodes: null,//自定義展示元素集合
mode: "left",//方向
max: 0,//展示尺寸(像素或百分比)
min: 0,//收縮尺寸(像素或百分比)
delay: 100,//觸發延時
interval: 20,//滑動間隔
duration: 20,//滑動持續時間
defaultIndex: null,//默認展示索引
autoClose: true,//是否自動恢復
tween: function(t,b,c,d){ return -c * ((t=t/d-1)*t*t*t - 1) + b; },//tween算子
onShow: function(index){},//滑動展示時執行
onClose: function(){}//滑動關閉執行
};
return $$.extend(this.options, options || {});
},
//設置容器
_initContainer: function() {
//容器樣式設置
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";
//移出容器時
$$E.addEvent( container, "mouseleave", this._LEAVE );
//設置滑動元素
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" );
},
//設置滑動對象
_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 ),
//計算默認目標值的函數
getDefaultTarget = this._reverse
? function(i){ return defaultSize * ( maxIndex - i ); }
: function(i){ return defaultSize * i; },
max = this.options.max, min = this.options.min, getMax, getMin;
//設置參數函數
if ( max > 0 || min > 0 ) {//自定義參數值
//小數按百分比設置
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 {//根據元素尺寸設置參數值
getMax = function(o){ return Math.max( Math.min( o.node[ offset ], clientSize ), defaultSize ); };
getMin = function(o){ return ( clientSize - o.max ) / maxIndex; };
}
//設置滑動對象
this._each( function(o, i){
//移入滑動元素時執行程序
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 );
//計算尺寸
o.current = o.defaultTarget = getDefaultTarget(i);//默認目標值
o.max = getMax(o); o.min = getMin(o);
});
$$CE.fireEvent( this, "initNodes" );
},
//根據索引滑動展示
show: function(index) {
this._setMove( index | 0 );
this.onShow( this._index );
this._easeMove();
},
//滑動到默認狀態
close: function() {
this._setMove();
this.onClose();
this._easeMove();
},
//重置為默認狀態或展開索引對應滑動對象
reset: function(index) {
clearTimeout(this._timerDelay);
if ( index == undefined ) {
this._defaultMove();
} else {
this._setMove(index);
this.onShow( this._index );
this._targetMove();
}
},
//設置滑動參數
_setMove: function(index) {
var setTarget;//設置目標值函數
if ( index == undefined ) {//設置默認狀態目標值
getTarget = function(o){ return o.defaultTarget; }
} else {//根據索引設置滑動目標值
var nodes = this._nodes, maxIndex = nodes.length - 1;
//設置索引
this._index = index = index < 0 || index > maxIndex ? 0 : index | 0;
//設置展示參數
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);//設置目標值
o.begin = o.current;//設置開始值
o.change = o.target - o.begin;//設置變化值
});
$$CE.fireEvent( this, "setMove", index );
},
//滑移程序
_easeMove: function() {
this._time = 0; this._move();
},
//移動程序
_move: function() {
if ( this._time < this.duration ){//未到達
this._tweenMove();
this._time++;
this._timerMove = setTimeout( this._MOVE, this.interval );
} else {//完成
this._targetMove();//防止計算誤差
$$CE.fireEvent( this, "finish" );
}
},
//tween移動函數
_tweenMove: function() {
this._setPos( function(o) {
return this.tween( this._time, o.begin, o.change, this.duration );
});
$$CE.fireEvent( this, "tweenMove" );
},
//目標值移動函數
_targetMove: function() {
this._setPos( function(o) { return o.target; } );
$$CE.fireEvent( this, "targetMove" );
},
//默認值移動函數
_defaultMove: function() {
this._setPos( function(o) { return o.defaultTarget; } );
$$CE.fireEvent( this, "defaultMove" );
},
//設置坐標值
_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";
});
},
//歷遍滑動對象集合
_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;//恢復樣式
$$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 );
}
};
自動展示擴展
復制代碼 代碼如下:
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;//定時器
this._autoPause = false;//暫停自動展示
//展示下一個滑動對象
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 ) {
//擴展options
$$.extend( options, {
autoDelay: 2000//展示時間
}, false );
//擴展屬性
$$.extend( this, prototype );
//擴展鉤子
$$A.forEach( methods, function( method, name ){
$$CE.addEvent( this, name, method );
}, this );
}
init.apply( this, arguments );
}
})();
提示信息擴展
復制代碼 代碼如下:
SlideView.prototype._initialize = (function(){
var init = SlideView.prototype._initialize,
methods = {
"init": function(){
//坐標樣式
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];
};
//設置提示對象
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;
//創建提示對象
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 = {
//設置坐標值函數
_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 ) {
//擴展options
$$.extend( options, {
tipPos: "bottom",//提示位置
tipTag: "*",//提示元素標簽
tipClass: "",//提示元素樣式
tipShow: null,//展示時目標坐標
tipClose: null//關閉時目標坐標
}, false );
//擴展屬性
$$.extend( this, prototype );
//擴展鉤子
$$A.forEach( methods, function( method, name ){
$$CE.addEvent( this, name, method );
}, this );
}
init.apply( this, arguments );
}
})();
完整實例下載
原文：http://www.cnblogs.com/cloudgamer/archive/2010/07/29/SlideView.html