开发学院网页设计JavaScript 仿淘宝UED导航菜单 阅读

仿淘宝UED导航菜单

 2010-09-14 13:23:54 来源:WEB开发网   
核心提示:本文示例源代码或素材下载 昨天在淘宝UED网站上看到导航菜单很不错,于是自己动手写了一个,仿淘宝UED导航菜单, 具体效果请查看: http://www.cnblogs.com/LongWay/archive/2008/10/28/1321627.html代码如下:varSlideNavi=Class.crea

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

昨天在淘宝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));
    });
  }
});

1 2  下一页

Tags:淘宝 UED 导航

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
更多精彩
    赞助商链接

    热点阅读
      焦点图片
        最新推荐
          精彩阅读