El efecto está basado en la
ley de Hook. Un ejemplo trasladado a javascript sería este:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ley de Hook</title>
<style>
#pp{ width:50px; height:50px; background-color:#FF0000; position:absolute;}
</style>
<script>
function mover(c,k,inicio,fin,propiedad,unidad){
if(this.intervalo)clearInterval(this.intervalo);
this.style[propiedad]=inicio+unidad;
this.velocidad=0;
_this=this;
this.intervalo=setInterval(
function(){
_this.aceleracion = _this.velocidad - k * (parseInt(_this.style[propiedad]) - fin);
_this.velocidad = c * _this.aceleracion;
_this.style[propiedad]=parseInt(_this.style[propiedad])+_this.velocidad+unidad;
},10);
}
</script>
</head>
<body>
<div id="pp"></div><br />
<br /><br />
<br />
<form id="form1" name="form1" method="post" action="">
<input name="horizontal" type="button" id="horizontal" value="horizontal" onclick="mover.call(document.getElementById('pp'),.9,.1,0,500,'left','px');" />
<input name="vertical" type="button" id="vertical" value="vertical" onclick="mover.call(document.getElementById('pp'),.9,.1,0,500,'top','px');" />
<input name="escala1" type="button" id="escala1" value="escala +" onclick="mover.call(document.getElementById('pp'),.9,.1,50,100,'width','px');" /><input name="escala2" type="button" id="escala2" value="escala -" onclick="mover.call(document.getElementById('pp'),.9,.1,100,50,'width','px');" />
</form>
</body>
</html>
c y k son 2 números constantes mayores que cero y menores que uno, y que determinan la elasticidad y la velocidad del movimiento.