javascript学习指南_javascript实现块拖动导航菜单效果

HTML代码

   渝中区
   江北区
   九龙坡区
   沙坪坝区
   渝北区
   大渡口区
   南岸区
  
  

   
• 
    
   
   
   
    
  
     渝中区
     江北区
     九龙坡区
     沙坪坝区
     渝北区
     大渡口区
     南岸区
    
    
  
     
  • 
      
     
    

    css

     代码如下
    

    javascript

     代码如下 var sliderMenu = function(id,opt){
     opt = opt ¦¦ {};
     this.box = $("#"+id);
     this.menu = this.box.find(".menu li");
     this.slider = this.box.find(".slider");
     this.move = this.slider.find(".move");
     this.moveWidth = this.move.outerWidth();
     this.S = {
      min:0,
      max:this.slider.width() - this.moveWidth
     }
     this.on = this.menu.eq(0);//当前选中项
     this.end = opt.end;//回调
     this.bind();
    }
    sliderMenu.prototype = {
     bind : function(){
      var T = this;
      this.menu.click(function(){
       T.turn($(this));
      })
      this.move.click(function(e){
       stopBubble(e);
      }).hover(function(){
       $(this).addClass("current");
      },function(){
       $(this).removeClass("current");
      });
      this.Move();
      //默认滑动到第一项
      window.setTimeout(function(){
       T.turn(T.on);
      },500)
     },
     Move : function(e){
      var T = this,
       D = $(document),
       moveNowPos = null,
       moveLastPos = null,
       mouseLastPos = null,
       mouseNowPos = null,
       c,
       E = {
        state : false,
        timer : null,
        down : function(e){
         E.state = true;
         e = e ¦¦ window.event;
         moveNowPos = parseInt(T.move.css("left"));
         mouseLastPos = e.clientX;
         T.slider.addClass("on_move");
         //绑定事件到document
         D.unbind("mousemove").unbind("mouseup").bind("mousemove",E.move).bind("mouseup",E.up);
         if(e.preventDefault){
          e.preventDefault();
         }else{
          e.returnValue = false;
         }
        },
        move : function(e){
         if(!E.state){return;}
         e = e ¦¦ window.event;
         mouseNowPos = e.clientX;
         c = mouseNowPos - mouseLastPos;
         moveLastPos = moveNowPos+c;
         if(moveLastPos       moveLastPos = T.S.min;
         }
         if(moveLastPos>T.S.max&&c>0){
          c = T.S.max - moveNowPos;
          moveLastPos = moveNowPos+c;
         }
         T.move.css({
          "left":moveLastPos
         })
     
         if(E.timer) {
          window.clearTimeout(E.timer);
         }
         E.timer = window.setTimeout(function(){
          T.check(false);
         },5)
     
         if(e.preventDefault){
          e.preventDefault();
         }else{
          e.returnValue = false;
         }
        },
        up : function(){
         if(!E.state){return;}
         E.state = false;
         T.slider.removeClass("on_move");
         D.unbind("mousemove").unbind("mouseup");
         T.turn(T.on);
        }
       }
      this.move.bind("mousedown",E.down);
      //点击空白处
      this.slider.click(function(e){
       var mousePos = e.clientX,
        left = mousePos - T.slider.offset().left + $(window).scrollLeft() - T.moveWidth/2;
       if(left    if(left>T.S.max){left = T.S.max;}
       T.move.animate({
        "left":left
       },80,function(){
        T.check();
       })
      })
     },
     check : function(t){
      var T = this,
       X = this.move.offset().left,
       x,w,m,
       first = this.menu.first(),
       last = this.menu.last();
      if(X    this.turn(first,t);
       return;
      }
      if(X>last.offset().left+last.outerWidth()){
       this.turn(last,t);
       return;
      }
      //匹配菜单项
      for(var i=0;i    m = this.menu.eq(i);
       if(m.hasClass("current")){continue;}
       w = m.outerWidth();
       x = m.offset().left;
       if(X>=x&&X<=(x+w)){
        this.turn(m,t);
        break;
       }
      }
     },
     turn : function(j,t){
      var x = j.offset().left,
       w = j.outerWidth();
      j.addClass("current").siblings().removeClass("current");
      if(t!==false){
       this.move.animate({
        "left":x+w/2-this.slider.offset().left-this.moveWidth/2
       },200)
      }
      this.on = j;
      try{this.end();}catch(e){};
     }
    }

    效果如下图

    

     

     

    javascript学习指南_javascript实现块拖动导航菜单效果

    http://m.bbyears.com/wangyetexiao/33198.html

    推荐访问: