仿淘宝UED导航菜单-阿里云开发者社区

仿淘宝UED导航菜单

2017-06-25 1061

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

昨天在淘宝UED网站上看到导航菜单很不错，于是自己动手写了一个。

效果如下：

顺便做了一种变体，实际上只是改变了CSS和一点HTML而已：

代码如下：

   
  
var SlideNavi = Class.create({
     initialize:function(naviItems,currentClassName,slider){
         var self = this;
         this.naviItems = naviItems;
         this.currentClassName = currentClassName;
         this.slider = slider;
         
         this.currentIndex = 0;
         var currentTab = function(){
             return self.naviItems[self.currentIndex];
         }
         this.timeInterval = new Object();
         var getStep = function(target,current){
             var step = (target - current)/5;
            if(Math.abs(step)<1 && step != 0){
                 step = (target-current)>0?1:-1;
             }
             return Math.round(step);
         }
         var tabHover = function(item){
             //更改slider的位置和长短
            clearInterval(self.timeInterval);
             var initLeft = parseInt(self.slider.getStyle("left"));
             var initRight = initLeft + self.slider.getWidth();
             
             var targetLeft = parseInt(item.positionedOffset().left);
             var targetRight = targetLeft + item.getWidth();
             
             if(initLeft == targetLeft)
                 return;
                 
             var leftToRight = true;
             if(initLeft > targetLeft)
                 leftToRight = false;
             if(leftToRight){
                 newTargetLeft = targetLeft + Math.round((targetLeft - initLeft) * 0.1);
                 newTargetRight = targetRight + Math.round((targetRight - initRight) * 0.05);
             }else{
                 newTargetLeft = targetLeft + Math.round((targetLeft - initLeft) * 0.05);
                 newTargetRight = targetRight + Math.round((targetRight - initRight) * 0.1);
             }
             
             function slide(){
                 var stepLeft = getStep(newTargetLeft,initLeft);
                 var stepRight = getStep(newTargetRight,initRight);
                 if(stepLeft != 0){
                     initLeft += stepLeft;
                 }
                 if(stepRight != 0){
                     initRight += stepRight;
                 }
                 self.slider.setStyle({
                     left:initLeft + "px",
                     width:initRight - initLeft + "px"
                 });
                 if(stepLeft == 0 && stepRight == 0){
                     function moveBack(){
                         var newStepLeft = getStep(targetLeft,newTargetLeft);
                         var newStepRight = getStep(targetRight,newTargetRight);
                         if(newStepLeft != 0){
                             newTargetLeft += newStepLeft;
                         }
                         if(newStepRight != 0){
                             newTargetRight += newStepRight;
                         }
                         self.slider.setStyle({
                             left:newTargetLeft + "px",
                             width:newTargetRight - newTargetLeft + "px"
                         });
                         if(newStepLeft == 0 && newStepRight == 0)
                             clearInterval(self.timeInterval);
                     }
                     clearInterval(self.timeInterval);
                     self.timeInterval = setInterval(moveBack,10);
                     
                 }
             }
             self.timeInterval = setInterval(slide,10);
         }
         var changeTab = function(item){
             if(item != currentTab()){
                 currentTab().removeClassName(self.currentClassName);
                 item.addClassName(self.currentClassName);
                 self.currentIndex = item.index;
             }
             tabHover(item);
         }
         var tabBack = function(event){
             tabHover(currentTab());
         }
         changeTab(currentTab());
         this.naviItems.each(function(item,index){
             item.index = index;
             item.observe("mouseover",tabHover.bind(item,item));
             item.observe("mouseout",tabBack);
             item.firstDescendant().observe("click",changeTab.bind(item,item));
         });
     }
 });
   
  