JavaScript implementation block drag navigation menu effect

HTML code

The code is as follows

Copy Code

<div id= "Slider_menu" class= "Slider_menu" > <div id= "Slider_menu1" > <ul class= "menu Clearfix MB10" > <li> Yuzhong District </li> <li> Jiangbei District </li> <li> Jiulongpo District </li> <li> Shapingba District </li> <li> Yubei District </li> <li> Dadukou District </li> <li> Nanan District </li> </ul> <ul class= "Slider Clearfix" > <li class= "Move" ></li> </ul> </div> <div id= "SLIDER_MENU2" > <ul class= "menu Clearfix MB10" > <li> Yuzhong District </li> <li> Jiangbei District </li> <li> Jiulongpo District </li> <li> Shapingba District </li> <li> Yubei District </li> <li> Dadukou District </li> <li> Nanan District </li> </ul> <ul class= "Slider Clearfix" > <li class= "Move" ></li> </ul> </div> </div><!--slider_menu-->

Css

The code is as follows

Copy Code

<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;p adding: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

The code is as follows

Copy Code

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);//Current selected This.end = opt.end;//Callback 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 (); Slide to the first item by default 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"); Binding Events to 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); Click on the Blank Space 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, i = 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 } Matching menu items 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) {}; } }

The effect of the following figure