DIV CSS 佈局教程網

作者blog原文：
http://www.cnblogs.com/cloudgamer/archive/2008/12/24/Slider.html

這個滑動條（拖動條）效果，一開始是參考了BlueDestiny的slider和Apple產品展示的樣式，做了程序的原型。
在做了拖放效果之後，我想應該可以做一個更好的了，所以重做一遍，完善和擴展了一些功能。
礙於時間沒有做得很強大，都是一些基本功能，希望各位多提意見！

預覽效果1：
這個是仿Apple滑動條產品展示效果。
除了原來的效果（包括點擊緩動滑移、拖動滑移），我還加入了本程序特有的滾輪和鍵盤控制，滑動條兩端鼠標放上去會自動滑動，滑動到兩邊還會自動換一個表示停止的圖案。

預覽效果2：
這裡是稍微模擬了一下滾動條，當然離真正的滾動條還差很遠。
滑動條除了水平還支持垂直方向的滑動，在內容顯示部分按上下方向（需要先點擊選中一下）或使用鼠標滾輪也能控制滑動。

預覽效果3：
這裡主要是滑動條關於值方面的應用，可以應用在度量計算等方面。

程序說明

首先需要一個容器，滑動范圍就在這個容器裡面，還有是容器裡面的絕對定位的滑塊，基本就是這兩部分。
滑塊拖放的部分請參考拖放效果，這裡我把拖放程序擴展了一個設置滑塊位置的SetPos方法方便程序使用。

【水平和垂直滑動】

程序支持水平和垂直滑動，設置Horizontal屬性為true就是水平滑動（默認），為false就是垂直滑動。
這個屬性只能在實例化時設置，初始化之後會就不要修改了。
程序初始化時就根據這個屬性鎖定拖放的方向：

this._drag[this._horizontal ? "LockY" : "LockX"] = true;

程序支持兩個方向的滑動，如果每次都判斷一下再分別設置參數會很麻煩，
所以程序中每次滑動都計算兩個方向的位置參數，並把參數直接交給_drag來處理。
由於_drag在實例化時已經做了范圍限制和方向鎖定，已經帶了位置參數修正，所以可以直接交給它處理。
這樣雖然效率差點，但就能大大降低復雜度，我想還是值得的。

【自動滑移】

運行Run自動滑移程序後，就會自動滑移，參數可以設置滑移的方向（true為右/下，false為左/上）。
步長是根據百分比來設置的

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);

然後通過位置屬性判斷是否到了極限值，不是的話就用一個定時器繼續滑動：

if(!(bIncrease ? this._IsMax : this._IsMin)){
    this._timer = setTimeout(Bind(this, this.Run, bIncrease), this.RunTime);
}

【緩動滑移】

除了SetPos還有一個EasePos緩動滑移程序可以設置滑塊位置。
如果Ease屬性是false時，EasePos跟SetPos一樣直接設置位置，為true時就會緩動（減速）設置位置。
其中緩動的效果請參考圖片切換展示效果 ，程序中如果目標值超過極限值時不能直接判斷是否到達目標值，不過可以用_IsMid屬性（參考位置判斷部分）來判斷沒有到極限值。
注意，因為要跟offset取的值比較，而offset取的值是整數，所以參數必須轉換成整數（程序用Math.round處理了），否則如果是小數那就永遠都不會相等（死循環）了。

ps：程序只在鼠標點擊控制和設置百分比位置中使用了EasePos，其它情況比較適合用SetPos。

【百分比和值】

這個是基本功能了，先看看GetPercent獲取百分比程序，這個百分比就是滑塊左邊距離跟滑動區域的比例：

return this._horizontal ? this.Bar.offsetLeft / (this.Container.clientWidth - this.Bar.offsetWidth)
        : this.Bar.offsetTop / (this.Container.clientHeight - this.Bar.offsetHeight)

注意滑動區域是容器的clientWidth減去滑塊的offsetWidth（關於這兩個屬性詳細請看這裡）。

對應的有SetPercent設置百分比位置程序，就是根據百分比參數設置滑塊的位置：

this.EasePos((this.Container.clientWidth - thi