Javascript實現的左右滑動菜單

先看Demo便于理解：請大家往這里看

業務需求：
1. 菜單個數不固定，當菜單個數長度小于給定范圍寬度，則左右移動控制按鈕不激活（呈灰色狀態）。
2. 初始未移動，右側按鈕為灰色，左邊按鈕為彩色，提示用戶可以點擊左側的移動查看菜單超出給定范圍的部分。
3. 當移動開始，左右按鈕都應為彩色，提示用戶此時可以進行左右兩邊的移動操作。
4. 當移動結束，當前方向的控制按鈕應轉變為灰色，提示用戶此方向菜單已經移動結束。
5. 若某側控制按鈕可用，則鼠標經過此按鈕會有高亮提示。
6. 用戶點擊菜單會有高亮效果，同時下方內容模塊隨菜單點擊而變化。

在寫這個模塊的時候，本來我是打算也用jquery來實現，因為本次項目絕大部分程序都是基于jquery的，如果這個模塊用jquery來寫也是相當簡單、快捷的，但偶貌似有段時間沒寫javascrip了，所以橫下一條心，哪怕代碼再繁瑣點，手指繭再厚點，加班時間再長點，也要用javascript來寫（老本可不能忘啊！）。最后就出了這個javascript版本的，事實上花的時間也不長，呵呵。

有2個需求是我自己想做的，但因為項目時間的問題，我沒有做。首先，移動速度是勻速，如果菜單項太多，用戶用起來會不會覺得太慢？我想做個加速運動，這個用jquery寫可就太簡單了 T_T（又提到jq了，說了不提它的啊^&*&@%）。再者，由于目前移動的步長是定死了的，菜單移動過程中會出現一個菜單一半顯示在外面，一半已經移動進遮罩層，如果用戶剛好要點擊這個菜單，交互似乎就顯得不夠友好了。如果每個菜單寬度固定，可以很容易得到一個移動步長。如果菜單不固定怎么做了（我還沒想好，誰能給我一個思路？）
這兩個需求有空再添加上去。反正基本業務需求已經完成，我就稍稍偷懶一下吧。

需求說完了，說下模塊功能構成。該模塊功能由兩部分組成，一個是菜單移動，另一個是選項卡切換。這次主要是做移動程序，選項卡切換用得是自己寫的一個選項卡插件《JQuery制作的選項卡改進版》，拿來即用。

Ok，分析部分說完了。就程序本身，我覺得不是什么很難的東東。就看看左右移動的兩個具體方法：

向左移動：

 goLeftScroll:function(){var iWidth = parseInt(this.scrollDiv.style.left);//當菜單的左坐標絕對值小于等于偏移寬度（由菜單總寬度減去外部容器寬度得到，該值則為移動的路程值）if(Math.abs(iWidth) <= this.offset){//菜單左坐標在當前值基礎上減去預設的步長值this.scrollDiv.style.left = iWidth - this.step + "px";//因為移動已經開始，檢測到右側按鈕如果會灰色，則修改樣式為激活if(ctrlClass.hasClass(this.oCtrlR,this.rightEnd))ctrlClass.removeClass(this.oCtrlR,this.rightEnd);}else if(Math.abs(iWidth) > this.offset){ctrlClass.addClass(this.oCtrlL,this.leftEnd);return;}}

向右移動：

 goRightScroll:function(){var iWidth = parseInt(this.scrollDiv.style.left);if(iWidth < 0){this.scrollDiv.style.left = iWidth + this.step + "px";ctrlClass.removeClass(this.oCtrlL,this.leftEnd);}else if(iWidth ==0){ctrlClass.addClass(this.oCtrlR,this.rightEnd);return;}}

其他的也就不說了，程序很簡單的。關鍵是搞清什么需求，理清思路再來寫具體程序就很容易了。大家覺得效果還可以，就多看幾遍源碼，其義自現。我就不放獨立下載地址了，鼓勵大家多看源碼。Demo上的css、js和html都是獨立的，有需要的朋友看看Demo后自己提取吧，其實也很簡單的啦。

Demo地址：點我，點我

后記：這個demo貌似在chrome下失效，暫時我還不知道怎么回事？麻煩哪位高手能告訴我問題出在哪兒，先在此感謝了！