辰东,玄幻小说排行榜

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

Slider實(shí)現(xiàn)的滑動(dòng)條效果

這個(gè)滑動(dòng)條（拖動(dòng)條）效果，一開始是參考了BlueDestiny的slider和Apple產(chǎn)品展示的樣式，做了程序的原型。

成都創(chuàng)新互聯(lián)專注于阿圖什企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),電子商務(wù)商城網(wǎng)站建設(shè)。阿圖什網(wǎng)站建設(shè)公司,為阿圖什等地區(qū)提供建站服務(wù)。全流程按需開發(fā)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

在做了拖放效果之后，我想應(yīng)該可以做一個(gè)更好的了，所以重做一遍，完善和擴(kuò)展了一些功能。礙于時(shí)間沒有做得很強(qiáng)大，都是一些基本功能，希望各位多提意見！

效果預(yù)覽

預(yù)覽效果1：

這個(gè)是仿Apple滑動(dòng)條產(chǎn)品展示效果。

除了原來的效果（包括點(diǎn)擊緩動(dòng)滑移、拖動(dòng)滑移），我還加入了本程序特有的滾輪和鍵盤控制，滑動(dòng)條兩端鼠標(biāo)放上去會(huì)自動(dòng)滑動(dòng)，滑動(dòng)到兩邊還會(huì)自動(dòng)換一個(gè)表示停止的圖案。

預(yù)覽效果2：

這里是稍微模擬了一下滾動(dòng)條，當(dāng)然離真正的滾動(dòng)條還差很遠(yuǎn)。

滑動(dòng)條除了水平還支持垂直方向的滑動(dòng)，在內(nèi)容顯示部分按上下方向（需要先點(diǎn)擊選中一下）或使用鼠標(biāo)滾輪也能控制滑動(dòng)。

預(yù)覽效果3：

這里主要是滑動(dòng)條關(guān)于值方面的應(yīng)用，可以應(yīng)用在度量計(jì)算等方面。

圖片已經(jīng)帶我們大致了解了這個(gè)效果，下面請(qǐng)我們耐心的看一下程序說明。

#p#

程序說明

首先需要一個(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來處理。
由于_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ù)百分比來設(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);

然后通過位置屬性判斷是否到了極限值，不是的話就用一個(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)值超過極限值時(shí)不能直接判斷是否到達(dá)目標(biāo)值，不過可以用_IsMid屬性（參考位置判斷部分）來判斷沒有到極限值。

注意，因?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。

#p#

【百分比和值】

這個(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：雖然說是最大值，但不一定就比較大的，不過這樣寫起來比較方便。

當(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)該都明白了。

【位置狀態(tài)】

程序中有位置程序onMin（最小值時(shí)）、onMax（最大值時(shí)）和onMid（中間值時(shí)）分別在各自位置時(shí)執(zhí)行。

ps：onMid指的是除最小值最大值外的中間部分，不是中心值。

程序是在Move滑動(dòng)程序中通過百分比來判斷當(dāng)前位置的（0時(shí)為最小值，1時(shí)為最大值，其他為中間值）。

由于Move程序并不會(huì)因?yàn)榈搅藰O限值就停止，如果僅僅根據(jù)百分比來判斷那么到了極限值，值雖然不變但程序就會(huì)一直被觸發(fā)。

而我需要的是當(dāng)值不變的時(shí)候，對(duì)應(yīng)位置程序僅僅觸發(fā)一次。根據(jù)需求就衍生出三個(gè)位置狀態(tài)屬性_IsMin（最小值狀態(tài)）、_IsMax（最大值狀態(tài)）和_IsMid（中間值狀態(tài)）。

用這幾個(gè)狀態(tài)屬性和百分比就能實(shí)現(xiàn)需要的效果了：

 
 
 
 
  
  
  
  var percent = this.GetPercent(); 
  
  
  
  //最小值判斷 
  
  
  
  if(percent > 0){ 
  
  
  
      this._IsMin = false; 
  
  
  
  }else{ 
  
  
  
      if(!this._IsMin){ this.onMin(); this._IsMin = true; } 
  
  
  
  } 
  
  
  
  //最大值判斷 
  
  
  
  if(percent < 1){ 
  
  
  
      this._IsMax = false; 
  
  
  
  }else{ 
  
  
  
      if(!this._IsMax){ this.onMax(); this._IsMax = true; } 
  
  
  
  } 
  
  
  
  //中間值判斷 
  
  
  
  if(percent > 0 && percent < 1){ 
  
  
  
      if(!this._IsMid){ this.onMid(); this._IsMid = true; } 
  
  
  
  }else{ 
  
  
  
      this._IsMid = false; 
  
  
  
  }

這三個(gè)位置狀態(tài)屬性在其他程序中也用來判斷是否到了極限值。

#p#

【鼠標(biāo)拖動(dòng)控制】

鼠標(biāo)拖動(dòng)控制，就是通過拖動(dòng)滑塊來設(shè)置定位。

這個(gè)就跟滾動(dòng)條意思差不多，主要是通過_drag本身的拖放效果來實(shí)現(xiàn)的（詳細(xì)看這里拖放效果）。

【鼠標(biāo)點(diǎn)擊控制】

鼠標(biāo)點(diǎn)擊控制，就是當(dāng)點(diǎn)擊容器的時(shí)候能定位到點(diǎn)擊的位置。

一般來說只要把ClickCtrl鼠標(biāo)點(diǎn)擊控制程序綁定容器的click事件中就可以了。

但這里有個(gè)問題，滑塊的點(diǎn)擊（拖動(dòng)控制）跟容器的點(diǎn)擊會(huì)發(fā)生沖突，具體表現(xiàn)是拖放結(jié)束后就“順便”觸發(fā)了容器的click。

這個(gè)本來在滑塊的點(diǎn)擊事件中取消冒泡就可以：

 
 
 
 
  
  
  
  addEventHandler(this.Bar, "click", BindAsEventListener(this, function(e){ e.stopPropagation(); }));

但ie的click機(jī)制有點(diǎn)問題：

里面的div取消冒泡，點(diǎn)擊它不會(huì)觸發(fā)外面div的onclick，但如果在里面的div點(diǎn)，然拖動(dòng)到外面的div放，就會(huì)觸發(fā)了，而ff是不會(huì)的。

ps：從外面拖到里面也是一樣的情況。

經(jīng)過測(cè)試，我覺得是因?yàn)閕e認(rèn)為點(diǎn)擊的點(diǎn)和放只要是發(fā)生在同一個(gè)元素的內(nèi)部（包括內(nèi)部的其他元素），那個(gè)這個(gè)點(diǎn)擊就是有效的；而ff則認(rèn)為點(diǎn)擊的點(diǎn)和放必須在同一個(gè)元素內(nèi)才有效（w3c標(biāo)準(zhǔn)應(yīng)該也是這樣）。

這個(gè)導(dǎo)致的問題是，當(dāng)拖放結(jié)束時(shí)如果放開鼠標(biāo)的地方是容器上，那么就會(huì)發(fā)生沖突了。

那對(duì)于ie的這個(gè)現(xiàn)象，解決方法其實(shí)也很多，我用的方法很簡(jiǎn)單，設(shè)一個(gè)屬性_ondrag來表示是否拖放中。

具體就是在DragStart開始拖放滑動(dòng)程序中把_ondrag設(shè)為true，并在DragStop結(jié)束拖放滑動(dòng)程序中把它設(shè)為false：

 
 
 
 
  
  
  
  setTimeout(Bind(this, function(){ this._ondrag = false; }), 10);

這里用了setTimeout，因?yàn)橥戏沤Y(jié)束后才會(huì)觸發(fā)容器的click，所以設(shè)一個(gè)延時(shí)，使這個(gè)值在容器的click觸發(fā)后才修改。

這樣就可以通過這個(gè)_ondrag來判斷是否應(yīng)該執(zhí)行ClickCtrl了：

 
 
 
 
  
  
  
  addEventHandler(this.Container, "click", BindAsEventListener(this, function(e){ this._ondrag || this.ClickCtrl(e);}));

接著看ClickCtrl鼠標(biāo)點(diǎn)擊控制程序，首先獲取容器的相對(duì)文檔的位置：

 
 
 
 
  
  
  
  var o = this.Container, iLeft = o.offsetLeft, iTop = o.offsetTop; 
  
  
  
  while (o.offsetParent) { o = o.offsetParent; iLeft += o.offsetLeft; iTop += o.offsetTop; }

注意，要逐級(jí)向上獲取才能取得相對(duì)相對(duì)文檔的位置。

然后通過pageX（pageY）和滑塊（這里是要設(shè)置到滑塊的中間位置所以取一半）得到要設(shè)置的位置：

 
 
 
 
  
  
  
  this.EasePos(e.pageX - iLeft - this.Bar.offsetWidth / 2, e.pageY - iTop - this.Bar.offsetHeight / 2);

這里要用pageX（pageY）來取值，而不是clientX（clientY）,因?yàn)楹笳呤菦]有計(jì)算滾動(dòng)條的。

ps：ie沒有pageX（pageY），不過在Event程序中已經(jīng)給window.event添加了這個(gè)屬性：

 
 
 
 
  
  
  
  oEvent.pageX = oEvent.clientX + document.documentElement.scrollLeft; 
  
  
  
  oEvent.pageY = oEvent.clientY + document.documentElement.scrollTop;

【鼠標(biāo)滾輪控制】

鼠標(biāo)滾輪控制，就是通過鼠標(biāo)滾輪滾動(dòng)來控制滑塊的滑動(dòng)。

首先ie綁定滾輪事件用的是mousewheel，ff用的是DOMMouseScroll，所以在WheelBind綁定鼠標(biāo)滾輪程序中是這樣設(shè)置的：

 
 
 
 
  
  
  
  addEventHandler(o, isIE ? "mousewheel" : "DOMMouseScroll", BindAsEventListener(this, this.WheelCtrl));

接著看WheelCtrl鼠標(biāo)滾輪控制程序，通過event的detail屬性可以獲取鼠標(biāo)滾動(dòng)的距離（值大?。┖头较颍ㄕ?fù)）。

利用它來設(shè)置要滑動(dòng)的位置：

 
 
 
 
  
  
  
  var i = this.WheelSpeed * e.detail; 
  
  
  
  this.SetPos(this.Bar.offsetLeft + i, this.Bar.offsetTop + i);

但ie沒有detail，對(duì)應(yīng)的有wheelDelta，wheelDelta的數(shù)值剛好是detail的40倍，而且方向相反（正負(fù)相反），所以Event程序中是這樣給window.event添加detail的：

 
 
 
 
  
  
  
  oEvent.detail = oEvent.wheelDelta / (-40);

為了防止觸發(fā)其他滾動(dòng)條，這里用了preventDefault取消默認(rèn)動(dòng)作。

注意不是用取消冒泡（貌似滾屏是事件的默認(rèn)動(dòng)作）。

【方向鍵控制】

方向鍵控制，就是通過鍵盤的左右（上下）方向鍵來控制滑塊的滑動(dòng)。

首先用KeyBind方向鍵綁定程序把KeyCtrl方向鍵控制程序綁定到對(duì)象的keydown事件中：

 
 
 
 
  
  
  
  addEventHandler(o, "keydown", BindAsEventListener(this, this.KeyCtrl));

在KeyCtrl中，通過event的keyCode屬性獲取鍵盤的按鍵（左37、上38、右39、下40）并進(jìn)行相應(yīng)的操作：

 
 
 
 
  
  
  
  switch (e.keyCode) { 
  
  
  
      case 37 ://左 
  
  
  
          iLeft -= iWidth; break; 
  
  
  
      case 38 ://上 
  
  
  
          iTop -= iHeight; break; 
  
  
  
      case 39 ://右 
  
  
  
          iLeft += iWidth; break; 
  
  
  
      case 40 ://下 
  
  
  
          iTop += iHeight; break; 
  
  
  
      default : 
  
  
  
          return;//不是方向按鍵返回 
  
  
  
  }

同樣為了防止觸發(fā)其他滾動(dòng)條，也用了preventDefault取消默認(rèn)動(dòng)作。

#p#

【focus和tabIndex】

在KeyBind程序中，除了綁定對(duì)象的keydown事件，還不夠的，可以在ff測(cè)試下面的代碼：

無論怎樣都觸發(fā)不了onkeydown事件（ie可以觸發(fā)），那就奇怪了，按照一般的思路應(yīng)該是可以的啊。

這個(gè)可以從w3c關(guān)于KeyboardEvent的部分中找到原因：Keyboard events are commonly directed at the element that has the focus.大概就是說鍵盤按鍵事件一般指向能獲取焦點(diǎn)的元素，就是不能獲取焦點(diǎn)的元素就不能觸發(fā)鍵盤按鍵事件了。

難道div就不能獲取焦點(diǎn)？用下面的代碼測(cè)試(ff)：

還真的不行，那問題就在于怎么使div能獲取焦點(diǎn)了（當(dāng)然這個(gè)是轉(zhuǎn)了不少?gòu)澆畔氤鰜淼模?/p>

最后發(fā)現(xiàn)給元素設(shè)置tabIndex就能讓元素能獲取焦點(diǎn)了，如果不需要詳細(xì)了解的話下面可以略過。

首先看看w3c關(guān)于onfocus的部分：The onfocus event occurs when an element receives focus either by the pointing device or by tabbing navigation.
This attribute may be used with the following elements: A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON. 當(dāng)元素通過指定（點(diǎn)擊）或tab導(dǎo)航（Tabbing navigation）獲得焦點(diǎn)，onfocus事件就會(huì)觸發(fā)。

該屬性會(huì)使用在以下元素（就是說默認(rèn)可以獲取焦點(diǎn)的元素）：A, AREA, LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
測(cè)試下面的代碼：

 
 
 
 
  
  
  
  focus

果然兩個(gè)事件都可以執(zhí)行。

接著看Tabbing navigation的部分：Those elements that do not support the tabindex attribute or support it and assign it a value of "0" are navigated next. These elements are navigated in the order they appear in the character stream. 這里看得不太明白，關(guān)鍵的意思是給元素設(shè)置tabindex為0就可以被導(dǎo)航到了（能獲取焦點(diǎn)了）。

測(cè)試下面的代碼（ff）：

果然兩個(gè)事件都能觸發(fā)了。

不過w3c說得很模糊，msdn上倒是很清楚：An element can have focus if the tabIndex property is set to any valid negative or positive integer.
Elements that receive focus can fire the onblur and onfocus events as of Internet Explorer 4.0, and the onkeydown, onkeypress, and onkeyup events as of Internet Explorer 5.

只要元素的tabIndex屬性設(shè)置成任何有效的整數(shù)那么該元素就能取得焦點(diǎn)。元素在取得焦點(diǎn)后就能觸發(fā)onblur，onfocus，onkeydown, onkeypress和onkeyup事件。

不同tabIndex值在tab order（Tabbing navigation）中的情況：Objects with a positive tabIndex are selected in increasing iIndex order and in source order to resolve duplicates.Objects with an tabIndex of zero are selected in source order. Objects with a negative tabIndex are omitted from the tabbing order.

tabIndex值是正數(shù)的對(duì)象根據(jù)遞增的值順序和代碼中的位置順序來被選擇；tabIndex值是0的對(duì)象根據(jù)在代碼中的位置順序被選擇；tabIndex值是負(fù)數(shù)的對(duì)象會(huì)被忽略。這個(gè)不知道是否符合標(biāo)準(zhǔn)，但貌似ff跟ie是一樣的（不同的地方后面會(huì)說）。

那么設(shè)置一個(gè)負(fù)的tabIndex值應(yīng)該是最理想的了。

ps：如果對(duì)ff的tabindex有興趣的話，推薦看看Test cases for tabindex bugs in Firefox，里面有更詳細(xì)更專業(yè)的分析。

那ie通過一開始的測(cè)試，是不是就說明不需要了呢？我們換一個(gè)元素測(cè)試：

換成ul就又不能觸發(fā)事件了，怎么搞的。

再看看msdn，里面有一段：The following elements can have focus by default but are not tab stops. .略. applet, div, frameSet, span, table, td.下面的元素默認(rèn)能獲取焦點(diǎn)但不能tab導(dǎo)航：applet, div, frameSet, span, table, td.

看來ie真是“為程序員著想”，但其他元素總不能漏了啊，還是全部都設(shè)置tabIndex好了。

終于回到程序上來，首先設(shè)置tabIndex：

 
 
 
 
  
  
  
  o.tabIndex = -1;

ff元素獲得焦點(diǎn)后會(huì)出現(xiàn)一個(gè)虛線框，去掉會(huì)美觀一點(diǎn)：

 
 
 
 
  
  
  
  isIE || (o.style.outline = "none");

ps：如果tabIndex設(shè)為0或以上的話ie也會(huì)出現(xiàn)虛線框。

綁定了keydown之后，點(diǎn)擊一下容器（獲取焦點(diǎn)）后就能用方向鍵控制方向了，但如果（沒有獲得焦點(diǎn)時(shí)）點(diǎn)擊滑塊，還是觸發(fā)不了事件。

因?yàn)榛瑝K在拖動(dòng)效果中ie的鼠標(biāo)捕獲和ff的取消默認(rèn)動(dòng)作導(dǎo)致容器不能獲得焦點(diǎn)，那手動(dòng)設(shè)置可以嗎？

是可以的，ff中就是直接在滑塊的mousedown事件中執(zhí)行容器的focus方法獲得焦點(diǎn)。

ie本來也是可以的，但ie中當(dāng)對(duì)象執(zhí)行focus方法時(shí)，如果該對(duì)象有部分在滾動(dòng)條外就會(huì)自動(dòng)滾動(dòng)到適當(dāng)?shù)奈恢茫ㄟ€好點(diǎn)擊不會(huì)這樣）。

為了降低影響，程序中把滑塊也綁定了鍵盤控制，這樣點(diǎn)擊滑塊時(shí)只要執(zhí)行滑塊的focus方法獲得焦點(diǎn)就可以了：

 
 
 
 
  
  
  
  var oFocus = isIE ? (this.KeyBind(this.Bar), this.Bar) : this.Container; 
  
  
  
  addEventHandler(this.Bar, "mousedown", function(){ oFocus.focus(); });

ps：由于focus并不會(huì)冒泡（w3c標(biāo)準(zhǔn)），所以不用擔(dān)心滑塊的focus導(dǎo)致容器獲得焦點(diǎn)。

ps2：w3c的文檔還真是難讀，還是msdn的易懂。

#p#

【樣式設(shè)置】

程序沒有對(duì)margin之類的樣式進(jìn)行處理，所以盡量使用“干凈”的元素，如果用ul那些，請(qǐng)先“清理”好。

在仿Apple滑動(dòng)條產(chǎn)品展示效果中，像那樣橫排的展示，最好是放在table里才能保證不換行，否則就要放一個(gè)很長(zhǎng)很長(zhǎng)的副容器來放內(nèi)容。

里面還有一個(gè)樣式比較特別的，細(xì)心的話可以看到滑塊是突出了一個(gè)半圓，而且是剛好能嵌在兩端的。

這里主要是滑塊兩邊的兩個(gè)層（兩個(gè)半圓）使用了絕對(duì)定位，設(shè)置了負(fù)的位置值（左邊是負(fù)的left，右邊是負(fù)的right）。

還有就是到達(dá)兩端時(shí)對(duì)應(yīng)的層會(huì)自動(dòng)換一個(gè)背景圖，但其實(shí)是同一張圖：

這里是用了變換背景圖位置的方法，這個(gè)方法也不新鮮了，這里要說說的是，雖然只是換垂直方向的坐標(biāo)，但backgroundPositionY只是ie的方法，所以還是要用backgroundPosition。

#p#

【應(yīng)用技巧】

在仿Apple滑動(dòng)條產(chǎn)品展示效果中，可以看到MaxValue設(shè)成了內(nèi)容容器的scrollWidth和clientWidth之差：

 
 
 
 
  
  
  
  MaxValue: $("idContent").scrollWidth - $("idContent").clientWidth,

其實(shí)這個(gè)值就是內(nèi)容容器scrollLeft的最大值，這樣在滑動(dòng)時(shí)要設(shè)置的內(nèi)容容器的scrollLeft剛好就是GetValue方法的值了（預(yù)覽效果2也一樣）：

 
 
 
 
  
  
  
  onMove: function(){ $("idContent").scrollLeft = this.GetValue(); }

預(yù)覽效果2中，滑塊的高度也特別設(shè)置過：

 
 
 
 
  
  
  
  $("idBar2").style.height = $("idSlider2").clientHeight * Math.min($("idContent2").clientHeight / $("idContent2").scrollHeight, 1) - 4 + "px";

其實(shí)就是使內(nèi)容跟內(nèi)容容器的高度之比等于滑塊跟滑動(dòng)容器之比，當(dāng)然這個(gè)比不能大于1，否則就滑塊高度就超過容器高度了，里面的4是邊框?qū)挾取?/p>

這樣的好處是滑塊會(huì)根據(jù)實(shí)際內(nèi)容自動(dòng)設(shè)置大小，就像一般的滾動(dòng)條，內(nèi)容越多滾動(dòng)條就越小，反之就越大，這利于用戶體驗(yàn)。

ps：仿Apple那個(gè)為了突出效果所以沒有設(shè)置，實(shí)際應(yīng)用中也應(yīng)該這樣設(shè)置一下。

預(yù)覽效果3中，從GetValue和GetPercent取得的數(shù)有可能是很長(zhǎng)的小數(shù)，所以顯示時(shí)必須處理一下。

這里看到程序中parseInt使用了兩個(gè)參數(shù)，而且第二個(gè)參數(shù)是10，是不是多余的呢？

不是的，因?yàn)槭謨?cè)上說了：如果沒有提供，則前綴為 '0x' 的字符串被當(dāng)作十六進(jìn)制，前綴為 '0' 的字符串被當(dāng)作八進(jìn)制。所有其它字符串都被當(dāng)作是十進(jìn)制的。而對(duì)于手動(dòng)輸入的數(shù)字，前面加了個(gè)0也是很普通的情況，這樣無意間就會(huì)變成八進(jìn)制了。

#p#

使用說明

首先實(shí)例化一個(gè)滑動(dòng)條對(duì)象，需要兩個(gè)參數(shù)，分別是滑動(dòng)容器和滑塊（滑塊要在容器里面哦）：

 
 
 
 
  
  
  
  var sld = new Slider("idSlider", "idBar")

有以下這些可選參數(shù)和屬性：

程序代碼

 
 
 
 
  
  
  
  //滑動(dòng)條程序 
  
  
  
  var Slider = Class.create(); 
  
  
  
  Slider.prototype = { 
  
  
  
    //容器對(duì)象，滑塊 
  
  
  
    initialize: function(container, bar, options) { 
  
  
  
      this.Bar = $(bar); 
  
  
  
      this.Container = $(container); 
  
  
  
      this._timer = null;//自動(dòng)滑移的定時(shí)器 
  
  
  
      this._ondrag = false;//解決ie的click問題 
  
  
  
      //是否最小值、最大值、中間值 
  
  
  
      this._IsMin = this._IsMax = this._IsMid = false; 
  
  
  
      //實(shí)例化一個(gè)拖放對(duì)象，并限定范圍 
  
  
  
      this._drag = new Drag(this.Bar, { Limit: true, mxContainer: this.Container, 
  
  
  
          onStart: Bind(this, this.DragStart), onStop: Bind(this, this.DragStop), onMove: Bind(this, this.Move) 
  
  
  
      }); 
  
  
  
       
  
  
  
      this.SetOptions(options); 
  
  
  
       
  
  
  
      this.WheelSpeed = Math.max(0, this.options.WheelSpeed); 
  
  
  
      this.KeySpeed = Math.max(0, this.options.KeySpeed); 
  
  
  
       
  
  
  
      this.MinValue = this.options.MinValue; 
  
  
  
      this.MaxValue = this.options.MaxValue; 
  
  
  
       
  
  
  
      this.RunTime = Math.max(1, this.options.RunTime); 
  
  
  
      this.RunStep = Math.max(1, this.options.RunStep); 
  
  
  
       
  
  
  
      this.Ease = !!this.options.Ease; 
  
  
  
      this.EaseStep = Math.max(1, this.options.EaseStep); 
  
  
  
       
  
  
  
      this.onMin = this.options.onMin; 
  
  
  
      this.onMax = this.options.onMax; 
  
  
  
      this.onMid = this.options.onMid; 
  
  
  
       
  
  
  
      this.onDragStart = this.options.onDragStart; 
  
  
  
      this.onDragStop = this.options.onDragStop; 
  
  
  
       
  
  
  
      this.onMove = this.options.onMove; 
  
  
  
       
  
  
  
      this._horizontal = !!this.options.Horizontal;//一般不允許修改 
  
  
  
       
  
  
  
      //鎖定拖放方向 
  
  
  
      this._drag[this._horizontal ? "LockY" : "LockX"] = true; 
  
  
  
       
  
  
  
      //點(diǎn)擊控制 
  
  
  
      addEventHandler(this.Container, "click", BindAsEventListener(this, function(e){ this._ondrag || this.ClickCtrl(e);})); 
  
  
  
      //取消冒泡，防止跟Container的click沖突 
  
  
  
      addEventHandler(this.Bar, "click", BindAsEventListener(this, function(e){ e.stopPropagation(); })); 
  
  
  
       
  
  
  
      //設(shè)置鼠標(biāo)滾輪控制 
  
  
  
      this.WheelBind(this.Container); 
  
  
  
      //設(shè)置方向鍵控制 
  
  
  
      this.KeyBind(this.Container); 
  
  
  
      //修正獲取焦點(diǎn) 
  
  
  
      var oFocus = isIE ? (this.KeyBind(this.Bar), this.Bar) : this.Container; 
  
  
  
      addEventHandler(this.Bar, "mousedown", function(){ oFocus.focus(); }); 
  
  
  
      //ie鼠標(biāo)捕獲和ff的取消默認(rèn)動(dòng)作都不能獲得焦點(diǎn)，所以要手動(dòng)獲取 
  
  
  
      //如果ie把focus設(shè)置到Container，那么在出現(xiàn)滾動(dòng)條時(shí)ie的focus可能會(huì)導(dǎo)致自動(dòng)滾屏 
  
  
  
    }, 
  
  
  
    //設(shè)置默認(rèn)屬性 
  
  
  
    SetOptions: function(options) { 
  
  
  
      this.options = {//默認(rèn)值 
  
  
  
          MinValue:    0,//最小值 
  
  
  
          MaxValue:    100,//最大值 
  
  
  
          WheelSpeed: 5,//鼠標(biāo)滾輪速度,越大越快(0則取消鼠標(biāo)滾輪控制) 
  
  
  
          KeySpeed:     50,//方向鍵滾動(dòng)速度,越大越慢(0則取消方向鍵控制) 
  
  
  
          Horizontal:    true,//是否水平滑動(dòng) 
  
  
  
          RunTime:    20,//自動(dòng)滑移的延時(shí)時(shí)間,越大越慢 
  
  
  
          RunStep:    2,//自動(dòng)滑移每次滑動(dòng)的百分比 
  
  
  
          Ease:        false,//是否緩動(dòng) 
  
  
  
          EaseStep:    5,//緩動(dòng)等級(jí),越大越慢 
  
  
  
          onMin:        function(){},//最小值時(shí)執(zhí)行 
  
  
  
          onMax:        function(){},//最大值時(shí)執(zhí)行 
  
  
  
          onMid:        function(){},//中間值時(shí)執(zhí)行 
  
  
  
          onDragStart:function(){},//拖動(dòng)開始時(shí)執(zhí)行 
  
  
  
          onDragStop:    function(){},//拖動(dòng)結(jié)束時(shí)執(zhí)行 
  
  
  
          onMove:        function(){}//滑動(dòng)時(shí)執(zhí)行 
  
  
  
      }; 
  
  
  
      Extend(this.options, options || {}); 
  
  
  
    }, 
  
  
  
    //開始拖放滑動(dòng) 
  
  
  
    DragStart: function() { 
  
  
  
        this.onDragStart(); 
  
  
  
      this._ondrag = true; 
  
  
  
    }, 
  
  
  
    //結(jié)束拖放滑動(dòng) 
  
  
  
    DragStop: function() { 
  
  
  
        this.onDragStop(); 
  
  
  
      setTimeout(Bind(this, function(){ this._ondrag = false; }), 10); 
  
  
  
    }, 
  
  
  
    //滑動(dòng)中 
  
  
  
    Move: function() { 
  
  
  
        this.onMove(); 
  
  
  
       
  
  
  
      var percent = this.GetPercent(); 
  
  
  
      //最小值判斷 
  
  
  
      if(percent > 0){ 
  
  
  
          this._IsMin = false; 
  
  
  
      }else{ 
  
  
  
          if(!this._IsMin){ this.onMin(); this._IsMin = true; } 
  
  
  
      } 
  
  
  
      //最大值判斷 
  
  
  
      if(percent < 1){ 
  
  
  
          this._IsMax = false; 
  
  
  
      }else{ 
  
  
  
          if(!this._IsMax){ this.onMax(); this._IsMax = true; } 
  
  
  
      } 
  
  
  
      //中間值判斷 
  
  
  
      if(percent > 0 && percent < 1){ 
  
  
  
          if(!this._IsMid){ this.onMid(); this._IsMid = true; } 
  
  
  
      }else{ 
  
  
  
          this._IsMid = false; 
  
  
  
      } 
  
  
  
    }, 
  
  
  
    //鼠標(biāo)點(diǎn)擊控制 
  
  
  
    ClickCtrl: function(e) { 
  
  
  
      var o = this.Container, iLeft = o.offsetLeft, iTop = o.offsetTop; 
  
  
  
      while (o.offsetParent) { o = o.offsetParent; iLeft += o.offsetLeft; iTop += o.offsetTop; } 
  
  
  
      //考慮有滾動(dòng)條，要用pageX和pageY 
  
  
  
      this.EasePos(e.pageX - iLeft - this.Bar.offsetWidth / 2, e.pageY - iTop - this.Bar.offsetHeight / 2); 
  
  
  
    }, 
  
  
  
    //鼠標(biāo)滾輪控制 
  
  
  
    WheelCtrl: function(e) { 
  
  
  
      var i = this.WheelSpeed * e.detail; 
  
  
  
      this.SetPos(this.Bar.offsetLeft + i, this.Bar.offsetTop + i); 
  
  
  
      //防止觸發(fā)其他滾動(dòng)條 
  
  
  
      e.preventDefault(); 
  
  
  
    }, 
  
  
  
    //綁定鼠標(biāo)滾輪 
  
  
  
    WheelBind: function(o) { 
  
  
  
        //鼠標(biāo)滾輪控制 
  
  
  
      addEventHandler(o, isIE ? "mousewheel" : "DOMMouseScroll", BindAsEventListener(this, this.WheelCtrl)); 
  
  
  
    }, 
  
  
  
    //方向鍵控制 
  
  
  
    KeyCtrl: function(e) { 
  
  
  
      if(this.KeySpeed){ 
  
  
  
          var iLeft = this.Bar.offsetLeft, iWidth = (this.Container.clientWidth - this.Bar.offsetWidth) / this.KeySpeed 
  
  
  
              , iTop = this.Bar.offsetTop, iHeight = (this.Container.clientHeight - this.Bar.offsetHeight) / this.KeySpeed; 
  
  
  
          //根據(jù)按鍵設(shè)置值 
  
  
  
          switch (e.keyCode) { 
  
  
  
              case 37 ://左 
  
  
  
                  iLeft -= iWidth; break; 
  
  
  
              case 38 ://上 
  
  
  
                  iTop -= iHeight; break; 
  
  
  
              case 39 ://右 
  
  
  
                  iLeft += iWidth; break; 
  
  
  
              case 40 ://下 
  
  
  
                  iTop += iHeight; break; 
  
  
  
              default : 
  
  
  
                  return;//不是方向按鍵返回 
  
  
  
          } 
  
  
  
          this.SetPos(iLeft, iTop); 
  
  
  
          //防止觸發(fā)其他滾動(dòng)條 
  
  
  
          e.preventDefault(); 
  
  
  
      } 
  
  
  
    }, 
  
  
  
    //綁定方向鍵 
  
  
  
    KeyBind: function(o) { 
  
  
  
      addEventHandler(o, "keydown", BindAsEventListener(this, this.KeyCtrl)); 
  
  
  
      //設(shè)置tabIndex使設(shè)置對(duì)象能支持focus 
  
  
  
      o.tabIndex = -1; 
  
  
  
      //取消focus時(shí)出現(xiàn)的虛線框 
  
  
  
      isIE || (o.style.outline = "none"); 
  
  
  
    }, 
  
  
  
    //獲取當(dāng)前值 
  
  
  
    GetValue: function() { 
  
  
  
      //根據(jù)最大最小值和滑動(dòng)百分比取值 
  
  
  
      return this.MinValue + this.GetPercent() * (this.MaxValue - this.MinValue); 
  
  
  
    }, 
  
  
  
    //設(shè)置值位置 
  
  
  
    SetValue: function(value) { 
  
  
  
      //根據(jù)最大最小值和參數(shù)值設(shè)置滑塊位置 
  
  
  
      this.SetPercent((value- this.MinValue)/(this.MaxValue - this.MinValue)); 
  
  
  
    }, 
  
  
  
    //獲取百分比 
  
  
  
    GetPercent: function() { 
  
  
  
      //根據(jù)滑動(dòng)條滑塊取百分比 
  
  
  
      return this._horizontal ? this.Bar.offsetLeft / (this.Container.clientWidth - this.Bar.offsetWidth) 
  
  
  
          : this.Bar.offsetTop / (this.Container.clientHeight - this.Bar.offsetHeight) 
  
  
  
    }, 
  
  
  
    //設(shè)置百分比位置 
  
  
  
    SetPercent: function(value) { 
  
  
  
      //根據(jù)百分比設(shè)置滑塊位置 
  
  
  
      this.EasePos((this.Container.clientWidth - this.Bar.offsetWidth) * value, (this.Container.clientHeight - this.Bar.offsetHeight) * value); 
  
  
  
    }, 
  
  
  
    //自動(dòng)滑移(是否遞增) 
  
  
  
    Run: function(bIncrease) { 
  
  
  
      this.Stop(); 
  
  
  
      //修正一下bIncrease 
  
  
  
      bIncrease = !!bIncrease; 
  
  
  
      //根據(jù)是否遞增來設(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); 
  
  
  
      //如果沒有到極限值就繼續(xù)滑移 
  
  
  
      if(!(bIncrease ? this._IsMax : this._IsMin)){ 
  
  
  
          this._timer = setTimeout(Bind(this, this.Run, bIncrease), this.RunTime); 
  
  
  
      } 
  
  
  
    }, 
  
  
  
    //停止滑移 
  
  
  
    Stop: function() { 
  
  
  
      clearTimeout(this._timer); 
  
  
  
    }, 
  
  
  
    //緩動(dòng)滑移 
  
  
  
    EasePos: function(iLeftT, iTopT) { 
  
  
  
      this.Stop(); 
  
  
  
      //必須是整數(shù)，否則可能死循環(huán) 
  
  
  
      iLeftT = Math.round(iLeftT); iTopT = Math.round(iTopT); 
  
  
  
      //如果沒有設(shè)置緩動(dòng) 
  
  
  
      if(!this.Ease){ this.SetPos(iLeftT, iTopT); return; } 
  
  
  
      //獲取緩動(dòng)參數(shù) 
  
  
  
      var iLeftN = this.Bar.offsetLeft, iLeftS = this.GetStep(iLeftT, iLeftN) 
  
  
  
      , iTopN = this.Bar.offsetTop, iTopS = this.GetStep(iTopT, iTopN); 
  
  
  
      //如果參數(shù)有值 
  
  
  
      if(this._horizontal ? iLeftS : iTopS){ 
  
  
  
          //設(shè)置位置 
  
  
  
          this.SetPos(iLeftN + iLeftS, iTopN + iTopS); 
  
  
  
          //如果沒有到極限值則繼續(xù)緩動(dòng) 
  
  
  
          if(this._IsMid){ this._timer = setTimeout(Bind(this, this.EasePos, iLeftT, iTopT), this.RunTime); } 
  
  
  
      } 
  
  
  
    }, 
  
  
  
    //獲取步長(zhǎng) 
  
  
  
    GetStep: function(iTarget, iNow) { 
  
  
  
      var iStep = (iTarget - iNow) / this.EaseStep; 
  
  
  
      if (iStep == 0) return 0; 
  
  
  
      if&n                                                

                                                網(wǎng)頁(yè)名稱：Slider實(shí)現(xiàn)的滑動(dòng)條效果                                                

                                                網(wǎng)頁(yè)URL：http://fisionsoft.com.cn/article/coecihg.html

新聞中心

其他資訊