<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Untitled Document</title><style>Body,ul{margin:0;padding:0;}ul{width:400px;Height:30px;position:relative;margin:20px Auto;}Li{width:98px;Height:28px;Border:1px solid Black;float: Left;Line-height:28px;text-align:Center;List-style:None;}. BG{width:100px;Height:5px;background:Red;position:Absolute; Left:0;Bottom:0;Overflow:Hidden;Border:None;}</style><Script>window.onload=function(){ varOul=document.getElementsByTagName ('ul')[0]; varArrli=Oul.getelementsbytagname ('Li'); varoBg=Arrli[arrli.length-1]; for(varI=0; I<Arrli.length-1; I++) {Arrli[i].onmouseover= function() {elasticstartmove (oBg, This. offsetleft); }; } }; var Left= 0; /*must be on the outside to solve the decimal error problem*/ functionElasticstartmove (obj,target) {var Speed= 0; Clearinterval (Obj.timer); Obj.timer=SetInterval (function() { speed+=(Target-obj.offsetleft)/5; Speed*= 0.75; Left+=Speed ; if(Math.Abs (speed)< 1 &&Math.Abs ( left-target)< 1){ /*Conditions of cessation*/clearinterval (Obj.timer); Obj.style.left=Target+'px'; } obj.style.left= Left+'px'; Document.title="Speed :"+ Speed+" - :"+Math.Abs ( left-target); }, -); } /*Elastic formula: Speed + = (target value-odiv.offsetleft)/5 speed *=0.7; Not applicable range: For some height can not take negative numbers can not be used
*/</Script></Head><Body><ul> <Li>Home</Li> <Li>Products</Li> <Li>About Us</Li> <Li>Contact information</Li> <binclass= ' BG '></Li></ul></Body></HTML>
Simple application of JS for elastic motion----The elasticity in the navigation bar