仿淘宝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。

      点此下载示例