Javascript实现的左右滑动菜单

先看Demo便于理解：请大家往这里看

业务需求：
1. 菜单个数不固定，当菜单个数长度小于给定范围宽度，则左右移动控制按钮不激活（呈灰色状态）。
2. 初始未移动，右侧按钮为灰色，左边按钮为彩色，提示用户可以点击左侧的移动查看菜单超出给定范围的部分。
3. 当移动开始，左右按钮都应为彩色，提示用户此时可以进行左右两边的移动操作。
4. 当移动结束，当前方向的控制按钮应转变为灰色，提示用户此方向菜单已经移动结束。
5. 若某侧控制按钮可用，则鼠标经过此按钮会有高亮提示。
6. 用户点击菜单会有高亮效果，同时下方内容模块随菜单点击而变化。

在写这个模块的时候，本来我是打算也用jquery来实现，因为本次项目绝大部分程序都是基于jquery的，如果这个模块用jquery来写也是相当简单、快捷的，但偶貌似有段时间没写javascrip了，所以横下一条心，哪怕代码再繁琐点，手指茧再厚点，加班时间再长点，也要用javascript来写（老本可不能忘啊！）。最后就出了这个javascript版本的，事实上花的时间也不长，呵呵。

有2个需求是我自己想做的，但因为项目时间的问题，我没有做。首先，移动速度是匀速，如果菜单项太多，用户用起来会不会觉得太慢？我想做个加速运动，这个用jquery写可就太简单了 T_T（又提到jq了，说了不提它的啊^&*&@%）。再者，由于目前移动的步长是定死了的，菜单移动过程中会出现一个菜单一半显示在外面，一半已经移动进遮罩层，如果用户刚好要点击这个菜单，交互似乎就显得不够友好了。如果每个菜单宽度固定，可以很容易得到一个移动步长。如果菜单不固定怎么做了（我还没想好，谁能给我一个思路？）
这两个需求有空再添加上去。反正基本业务需求已经完成，我就稍稍偷懒一下吧。

需求说完了，说下模块功能构成。该模块功能由两部分组成，一个是菜单移动，另一个是选项卡切换。这次主要是做移动程序，选项卡切换用得是自己写的一个选项卡插件《JQuery制作的选项卡改进版》，拿来即用。

Ok，分析部分说完了。就程序本身，我觉得不是什么很难的东东。就看看左右移动的两个具体方法：

向左移动：

 1 goLeftScroll:function(){
 2         var iWidth = parseInt(this.scrollDiv.style.left);
 3         //当菜单的左坐标绝对值小于等于偏移宽度（由菜单总宽度减去外部容器宽度得到，该值则为移动的路程值）
 4         if(Math.abs(iWidth) <= this.offset){
 5             //菜单左坐标在当前值基础上减去预设的步长值
 6             this.scrollDiv.style.left = iWidth - this.step + "px";
 7             //因为移动已经开始，检测到右侧按钮如果会灰色，则修改样式为激活
 8             if(ctrlClass.hasClass(this.oCtrlR,this.rightEnd))
 9                 ctrlClass.removeClass(this.oCtrlR,this.rightEnd);
         }else if(Math.abs(iWidth) > this.offset){
             ctrlClass.addClass(this.oCtrlL,this.leftEnd);
             return;
         }
     }

向右移动：

 1 goRightScroll:function(){
 2         var iWidth = parseInt(this.scrollDiv.style.left);
 3         if(iWidth < 0){
 4             this.scrollDiv.style.left = iWidth + this.step + "px";
 5             ctrlClass.removeClass(this.oCtrlL,this.leftEnd);
 6         }else if(iWidth ==0){
 7             ctrlClass.addClass(this.oCtrlR,this.rightEnd);
 8             return;
 9         }
     }

其他的也就不说了，程序很简单的。关键是搞清什么需求，理清思路再来写具体程序就很容易了。大家觉得效果还可以，就多看几遍源码，其义自现。我就不放独立下载地址了，鼓励大家多看源码。Demo上的css、js和html都是独立的，有需要的朋友看看Demo后自己提取吧，其实也很简单的啦。

Demo地址：点我，点我

后记：这个demo貌似在chrome下失效，暂时我还不知道怎么回事？麻烦哪位高手能告诉我问题出在哪儿，先在此感谢了！