|
程序說(shuō)明
首先需要一個(gè)容器，滑動(dòng)范圍就在這個(gè)容器里面，還有是容器里面的絕對(duì)定位的滑塊，基本就是這兩部分。
滑塊拖放的部分請(qǐng)參考拖放效果，這里我把拖放程序擴(kuò)展了一個(gè)設(shè)置滑塊位置的SetPos方法方便程序使用。
【水平和垂直滑動(dòng)】
程序支持水平和垂直滑動(dòng)，設(shè)置Horizontal屬性為true就是水平滑動(dòng)（默認(rèn)），為false就是垂直滑動(dòng)。
這個(gè)屬性只能在實(shí)例化時(shí)設(shè)置，初始化之后會(huì)就不要修改了。
程序初始化時(shí)就根據(jù)這個(gè)屬性鎖定拖放的方向：
this._drag[this._horizontal ? "LockY" : "LockX"] = true;
程序支持兩個(gè)方向的滑動(dòng)，如果每次都判斷一下再分別設(shè)置參數(shù)會(huì)很麻煩，
所以程序中每次滑動(dòng)都計(jì)算兩個(gè)方向的位置參數(shù)，并把參數(shù)直接交給_drag來(lái)處理。
由于_drag在實(shí)例化時(shí)已經(jīng)做了范圍限制和方向鎖定，已經(jīng)帶了位置參數(shù)修正，所以可以直接交給它處理。
這樣雖然效率差點(diǎn)，但就能大大降低復(fù)雜度，我想還是值得的。
【自動(dòng)滑移】
運(yùn)行Run自動(dòng)滑移程序后，就會(huì)自動(dòng)滑移，參數(shù)可以設(shè)置滑移的方向（true為右/下，false為左/上）。
步長(zhǎng)是根據(jù)百分比來(lái)設(shè)置的
var percent = this.GetPercent() + (bIncrease ? 1 : -1) * this.RunStep / 100;
this.SetPos((this.Container.clientWidth - this.Bar.offsetWidth) * percent, (this.Container.clientHeight - this.Bar.offsetHeight) * percent);
然后通過(guò)位置屬性判斷是否到了極限值，不是的話(huà)就用一個(gè)定時(shí)器繼續(xù)滑動(dòng)：
if(!(bIncrease ? this._IsMax : this._IsMin)){
this._timer = setTimeout(Bind(this, this.Run, bIncrease), this.RunTime);
}
【緩動(dòng)滑移】
除了SetPos還有一個(gè)EasePos緩動(dòng)滑移程序可以設(shè)置滑塊位置。
如果Ease屬性是false時(shí)，EasePos跟SetPos一樣直接設(shè)置位置，為true時(shí)就會(huì)緩動(dòng)（減速）設(shè)置位置。
其中緩動(dòng)的效果請(qǐng)參考圖片切換展示效果 ，程序中如果目標(biāo)值超過(guò)極限值時(shí)不能直接判斷是否到達(dá)目標(biāo)值，不過(guò)可以用_IsMid屬性（參考位置判斷部分）來(lái)判斷沒(méi)有到極限值。
注意，因?yàn)橐鷒ffset取的值比較，而offset取的值是整數(shù)，所以參數(shù)必須轉(zhuǎn)換成整數(shù)（程序用Math.round處理了），否則如果是小數(shù)那就永遠(yuǎn)都不會(huì)相等（死循環(huán)）了。
ps：程序只在鼠標(biāo)點(diǎn)擊控制和設(shè)置百分比位置中使用了EasePos，其它情況比較適合用SetPos。
【百分比和值】
這個(gè)是基本功能了，先看看GetPercent獲取百分比程序，這個(gè)百分比就是滑塊左邊距離跟滑動(dòng)區(qū)域的比例：
return this._horizontal ? this.Bar.offsetLeft / (this.Container.clientWidth - this.Bar.offsetWidth)
: this.Bar.offsetTop / (this.Container.clientHeight - this.Bar.offsetHeight)
注意滑動(dòng)區(qū)域是容器的clientWidth減去滑塊的offsetWidth（關(guān)于這兩個(gè)屬性詳細(xì)請(qǐng)看這里）。
對(duì)應(yīng)的有SetPercent設(shè)置百分比位置程序，就是根據(jù)百分比參數(shù)設(shè)置滑塊的位置：
this.EasePos((this.Container.clientWidth - this.Bar.offsetWidth) * value, (this.Container.clientHeight - this.Bar.offsetHeight) * value);
滑動(dòng)條更多的應(yīng)用是在于值的運(yùn)用。程序中屬性MinValue和MaxValue分別設(shè)置最小值和最大值。
ps：雖然說(shuō)是最大值，但不一定就比較大的，不過(guò)這樣寫(xiě)起來(lái)比較方便。
當(dāng)設(shè)置了這兩個(gè)屬性（值）就能GetValue獲取當(dāng)前值了：
return this.MinValue + this.GetPercent() * (this.MaxValue - this.MinValue);
對(duì)應(yīng)的SetValue設(shè)置值位置程序：
this.SetPercent((value- this.MinValue)/(this.MaxValue - this.MinValue));
這個(gè)很簡(jiǎn)單，懂點(diǎn)數(shù)學(xué)應(yīng)該都明白了。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 仿Apple滑動(dòng)條(拖動(dòng))產(chǎn)品展示效果 [1] 下一頁(yè) 仿Apple滑動(dòng)條(拖動(dòng))產(chǎn)品展示效果 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) 仿Apple滑動(dòng)條(拖動(dòng))產(chǎn)品展示效果 [2]
