仿淘宝UED导航菜单

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

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

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