<!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> <title>Elastic motion</title> <style>#div1{width:100px;Height:100px;background:Red;position:Absolute; } </style> <Scripttype= "Text/javascript">window.onload= function(){ varobtn=document.getElementById ("btn"); varOdiv=document.getElementById ("Div1"); Obtn.onclick= function() {move2 (Odiv, -); } } varTimer= NULL; var Speed= 0; functionMove () {clearinterval (timer); Timer=SetInterval (function(){ varOdiv=document.getElementById ("Div1"); speed+=( --odiv.offsetleft)/5; Speed*= 0.7; ODiv.style.left=Odiv.offsetleft+ Speed+'px'; }, -); } varIspeed= 0; functionMove2 (obj,target) {clearinterval (Obj.timer); Obj.timer=SetInterval (function() {ispeed+=(Target-obj.offsetleft)/5;Ispeed*=0.7; if(Math.Abs (ispeed)<1 &&Math.Abs (Target-obj.offsetleft)<1) {clearinterval (Obj.timer); } Else{obj.style.left=Obj.offsetleft+Ispeed+'px'; } }, -); } </Script></Head><Body> <inputtype= "button"ID= "BTN"value= "movement" /> <DivID= "Div1"> </Div> <Divstyle= "Width:1px;height:300px;background:black;top:0px;left:300px;position:absolute;"></Div></Body></HTML>
JS Elastic Motion