zoukankan      html  css  js  c++  java
  • 仿淘宝UED导航菜单

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

          效果如下:

       

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


       

          代码如下:

    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",
                        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",
                                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。

          点此下载示例

  • 相关阅读:
    BoundsChecker使用
    完成端口(Completion Port)详解
    VC内存泄露检查工具:VisualLeakDetector
    AcceptEx函数与完成端口的结合使用例子
    IOCP之accept、AcceptEx、WSAAccept的区别
    Visual C++ 6.0安装
    eclipse中在线安装FindBugs
    几种开源SIP协议栈对比
    全情投入是做好工作的基础——Leo鉴书39
    CheckStyle检查项目分布图
  • 原文地址:https://www.cnblogs.com/happyday56/p/1510798.html
Copyright © 2011-2022 走看看