仿淘宝UED导航菜单


本文示例源代码或素材下载

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

 

  具体效果请查看: http://www.cnblogs.com/LongWay/archive/2008/10/28/1321627.html

  代码如下:

varSlideNavi=Class.create({
  initialize:function(naviItems,currentClassName,slider){
    varself=this;
    this.naviItems=naviItems;
    this.currentClassName=currentClassName;
    this.slider=slider;
    
    this.currentIndex=0;
    varcurrentTab=function(){
      returnself.naviItems[self.currentIndex];
    }
    this.timeInterval=newObject();
    vargetStep=function(target,current){
      varstep=(target-current)/5;
      if(Math.abs(step)<1&&step!=0){
        step=(target-current)>0?1:-1;
      }
      returnMath.round(step);
    }
    vartabHover=function(item){
      //更改slider的位置和长短
      clearInterval(self.timeInterval);
      varinitLeft=parseInt(self.slider.getStyle("left"));
      varinitRight=initLeft+self.slider.getWidth();
      
      vartargetLeft=parseInt(item.positionedOffset().left);
      vartargetRight=targetLeft+item.getWidth();
      
      if(initLeft==targetLeft)
        return;
        
      varleftToRight=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);
      }
      
      functionslide(){
        varstepLeft=getStep(newTargetLeft,initLeft);
        varstepRight=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){
          functionmoveBack(){
            varnewStepLeft=getStep(targetLeft,newTargetLeft);
            varnewStepRight=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);
    }
    varchangeTab=function(item){
      if(item!=currentTab()){
        currentTab().removeClassName(self.currentClassName);
        item.addClassName(self.currentClassName);
        self.currentIndex=item.index;
      }
      tabHover(item);
    }
    vartabBack=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。


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3