Js+css to realize the _javascript technique of vertical navigation bar code with impact buffering effect

This article illustrates the JS+CSS to implement the vertical navigation bar code with impact buffering effect. Share to everyone for your reference. Specifically as follows:

This is a collision buffer effect of the navigation bar, JavaScript wonderful flavor classroom dedication to everyone's work, very good vertical menu, I hope you like. The technology used is JS and CSS.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-css-pzxg-r-nav-style-codes/

The specific code is as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <title> collision Buffering Effect of the navigation bar </title> <style type=" Text/css "> * {padding:0; margin:0;} li {List-style:no Ne Body {background: #fff;} ul {width:202px; margin:40px auto 0; position:relative;} li {width:200px; height:30px ; line-height:30px; padding-left:10px; border:1px solid #ccc; BORDER-LEFT:3PX solid #666; font-size:14px; Color: #333; margin-bottom:5px; position:relative; Z-index:2; } A {color: #333; Text-decoration:none}. Active {Font-weight:bold background: #fff0f0;} #bar {width:10px; Paddin g-left:0; Background: #cc6699; border:1px solid #cc6699; Position:absolute; top:0; Left: -14px; Z-index:3;
} </style> <script> var obj = null;
var aLis = null;
var Obar = null;
var itime = null;
var ispeed = 0;
var iAcc = 3;
var onoff = 0;
var iprev = 0;
var inext = 0; function Gotime () {for (var i = 0; i < aLis.length;
   I+=1) {if (alis[i] = = this) {var ITarget = (alis[0].offsetheight + 5) * I;
   Inext = i;
   OnOff = Inext-iprev;
   if (itime) {clearinterval (itime);
   } if (onoff>=0) {itime = SetInterval ("elasticity (" + ITarget +) ", 35);
   else {itime = SetInterval ("Postpone (" + ITarget +) ", 35);
  } Iprev = Inext;
  } alis[i].classname= "";
 This.classname= "Active";
 } function elasticity (target) {var top = Obar.offsettop;
 ISPEED+=IACC;
 Top + = Ispeed;
  if (top >= target) {ispeed*=-0.7;
   if (Math.Abs (ispeed) &LT;=IACC) {clearinterval (itime);
  Itime=null;
 } Top=target;
} oBar.style.top = top + "px";
  The function postpone (target) {if (obar.offsettop===target) {clearinterval (itime);
 Itime=null;
  else {ispeed = (target-obar.offsettop)/4;
 OBar.style.top = obar.offsettop + ispeed + "px";
 } window.onload = function () {obj = document.getElementById ("Nav");
 ALis = Obj.getelementsbytagname ("Li"); Obar= document.getElementById ("bar");
  for (var i = 0; i < alis.length i+=1) {if (alis[i].id!= "bar") {alis[i].onmouseover = Gotime;
}
 }
}; </script>  

The

wants this article to help you with your JavaScript programming.