原文鏈接：http://www.cnblogs.com/miqi2214/archive/2009/04/28/1445308.html

Javascript實(shí)現(xiàn)的左右滑動菜單

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

業(yè)務(wù)需求：
1. 菜單個數(shù)不固定，當(dāng)菜單個數(shù)長度小于給定范圍寬度，則左右移動控制按鈕不激活（呈灰色狀態(tài)）。
2. 初始未移動，右側(cè)按鈕為灰色，左邊按鈕為彩色，提示用戶可以點(diǎn)擊左側(cè)的移動查看菜單超出給定范圍的部分。
3. 當(dāng)移動開始，左右按鈕都應(yīng)為彩色，提示用戶此時可以進(jìn)行左右兩邊的移動操作。
4. 當(dāng)移動結(jié)束，當(dāng)前方向的控制按鈕應(yīng)轉(zhuǎn)變?yōu)榛疑?#xff0c;提示用戶此方向菜單已經(jīng)移動結(jié)束。
5. 若某側(cè)控制按鈕可用，則鼠標(biāo)經(jīng)過此按鈕會有高亮提示。
6. 用戶點(diǎn)擊菜單會有高亮效果，同時下方內(nèi)容模塊隨菜單點(diǎn)擊而變化。

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

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

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

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

向左移動：

goLeftScroll:function(){var iWidth = parseInt(this.scrollDiv.style.left);//當(dāng)菜單的左坐標(biāo)絕對值小于等于偏移寬度（由菜單總寬度減去外部容器寬度得到，該值則為移動的路程值）if(Math.abs(iWidth) <= this.offset){//菜單左坐標(biāo)在當(dāng)前值基礎(chǔ)上減去預(yù)設(shè)的步長值this.scrollDiv.style.left = iWidth - this.step + "px";//因?yàn)橐苿右呀?jīng)開始，檢測到右側(cè)按鈕如果會灰色，則修改樣式為激活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;}}

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

Demo地址：點(diǎn)我，點(diǎn)我

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

總結(jié)

以上是生活随笔為你收集整理的Javascript实现的左右滑动菜单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。