仿淘宝UED导航菜单

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

      效果如下：

• Home
• Archives
• Photo Gallery
• About

   

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

• Home
• Archives
• Photo Gallery
• About

   

      代码如下：

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));
        });
    }
});

      基本原理还是很简单，看代码就能明白，但是为了达到缓冲效果还是有一点麻烦，首先要判断slider向左还是向右滑动，根据不同的方向来决定slider的left和width属性，然后还要往回移动，这个就需要再用一次setInterval就可以达到效果。出于学习，我还是使用了prototype1.6。

      点此下载示例