咨询热线:0731-58389610
咨询邮箱:2640248354@qq.com
Javascript实现的左右滑动菜单

业务需求:
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);
10         }else if(Math.abs(iWidth) > this.offset){
11             ctrlClass.addClass(this.oCtrlL,this.leftEnd);
12             return;
13         }
14     }
复制代码

向右移动:

复制代码
 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         }
10     }
复制代码

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