javascript实现块拖动导航菜单效果
HTML代码
| 代码如下 | 复制代码 |
| <div id="slider_menu" class="slider_menu"> <div id="slider_menu1"> <ul class="menu clearfix mb10"> <li>渝中区</li> <li>江北区</li> <li>九龙坡区</li> <li>沙坪坝区</li> <li>渝北区</li> <li>大渡口区</li> <li>南岸区</li> </ul> <ul class="slider clearfix"> <li class="move"></li> </ul> </div> <div id="slider_menu2"> <ul class="menu clearfix mb10"> <li>渝中区</li> <li>江北区</li> <li>九龙坡区</li> <li>沙坪坝区</li> <li>渝北区</li> <li>大渡口区</li> <li>南岸区</li> </ul> <ul class="slider clearfix"> <li class="move"></li> </ul> </div> </div><!--slider_menu--> |
|
css
| 代码如下 | 复制代码 |
| <style type="text/css"> .slider_menu{border-radius:4px;border:1px solid #bbb;background:#f5f5f5;box-shadow:0 0 10px #ccc;width:540px;height:160px;padding:10px;margin:100px} .slider_menu .menu{margin-left:20px} .slider_menu .menu li{float:left;color:#555;padding:3px 8px;cursor:pointer;text-shadow:1px 1px 0 #fff;-webkit-transition:color .3s ease-out;-moz-transition:color .3s ease-out} .slider_menu .menu .current{color:green;font-weight:800} .slider_menu .slider{border:1px solid #ddd;background:#fff;border-radius:8px;height:8px;position:relative} .slider_menu .slider .move{position:absolute;width:15px;height:15px;border-radius:15px;background:#eee;border:1px solid #aaa;top:-3px;cursor:pointer;box-shadow:0 0 3px #999;-webkit-transition:border .3s linear;-moz-transition:border .3s linear} .slider_menu .slider .current,.slider_menu .on_move .move{border-color:#369;box-shadow:0 0 6px #B3E3FF} #slider_menu1{padding:0 20px 30px;border-bottom:1px solid #ddd} #slider_menu2{padding:20px 20px 0;border-top:1px solid #fff} </style> |
|
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<T.S.min&&c<0){ 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<T.S.min){left = T.S.min;} 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<first.offset().left){ this.turn(first,t); return; } if(X>last.offset().left+last.outerWidth()){ this.turn(last,t); return; } //匹配菜单项 for(var i=0;i<this.menu.length;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){}; } } |
|
效果如下图
补充：网页制作,js教程 
