javascript实现块拖动导航菜单效果

时间：2012-01-01 编辑：简简单单来源：一聚教程网

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){};
}
}

效果如下图

上一个：仿hao123邮箱登录效果
下一个： linux中通过FTP下载指定的文件方法

推荐专题

最新下载

热门教程

javascript实现块拖动导航菜单效果

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程