Javascript实现的左右滑动菜单

Javascript实现的左右滑动菜单

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

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

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

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

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

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

向左移动：