[Función] move() 1.0 (?) - ¿Me ayudas a mejorarla? xD Bueno, hice una linda función que lo que hace es mover gradualmente, primero rápido y despues mas lento, cualquier div a la que se la asignemos xP.
Se le puede aplicar a una div, con cualquier evento, o podes ponerlo dentro de un tag <script> para que carge "onLoad":
Código PHP:
<html>
<head>
<title>Prueba JS</title>
<script language="JavaScript">
function move(obj, x, y, a) //Objeto, coordenada X de destino, coordenada Y de destino y la aceleración, mientras mas alta la aceleración, mas despacio va, no tiene mucho sentido pero bue xD.
{
if(!obj.moving) //Esto es para que cuando llames a la función desde un mismo elemento 2 veces, no la cargue a menos que haya terminado de moverse.
{
obj.sumat=sum(a); //Esta función que hice es para sacar la sumatoria de un número, lo hago para despues calcular la aceleración.
if(x!==false) //Esto es para que si pones valor falso en la coordenada de destino, no mueva el objeto.
{
obj.distX=parseFloat(obj.style.left) - x; //Aca le saco el "px" a left y despues le resto las coordenadas de destino para calcular la trayectoria a recorrer.
obj.floatX=parseInt(obj.style.left); //Aca igualo por única vez floatX a style.left porque en IE style.left no puede tomar valores float, y luego hay diferencias en el trayecto recorrido.
}
if(y!==false) //Lo mismo que con X pero con Y.
{
obj.distY=parseFloat(obj.style.top) - y; //Idem.
obj.floatY=parseInt(obj.style.top); //Idem xD.
}
function loop() //Esta es la función loop que voy a llamar desde el setInterval, la pongo dentro de la función move para que pueda usar sus variables.
{
if(x!==false) //Lo mismo que arriba, si desactivaron X se saltea este paso.
{
obj.floatX=obj.floatX-(obj.distX/obj.sumat)*a; //Aca calculo el aumento de distancia y se lo agrego a "floatX".
obj.style.left=obj.floatX+"px"; //Luego igualo style.left a floatX. Todo para correjir el puto bug de IE xDD.
}
if(y!==false) //Idem que con X.
{
obj.floatY=obj.floatY-(obj.distY/obj.sumat)*a; //Idem.
obj.style.top=obj.floatY+"px"; //Idem.
}
a--; //Disminuyo "a" para que aumente la distancia cada vez mas despacio.
if(a<=0) //Cuando "a" llega a 0, es decir, que ya recorrió todo lo que debia recorrer.
{
clearInterval(obj.intervalID); //Desactivo el intervalo.
obj.moving=false; //Escribo que el elemento ya no se está moviendo.
}
}
obj.intervalID=setInterval(loop,33); //Inicio un intervalo cada 33 milisengudos de la función loop.
obj.moving=true; //Escribo que el elemento se está moviendo.
}
}
function sum(num)
{
var result=0;
for(i=1;i<=num;i++) result+=i; //No hay que explicar demasido, saca la sumatoria de un número xD.
return result;
}
/* La regla en la que me baso para calcular la distancia que tiene que recorrer es:
(600/(5+4+3+2+1))*5 + (600/(5+4+3+2+1))*4 + (600/(5+4+3+2+1))*3 + (600/(5+4+3+2+1))*2 + (600/(5+4+3+2+1))*1 = 600
La uso en la escuela para contabilidad para calcular las amortizaciones decrecientes o crecientes xDDDDDDDDDD. */
</script>
</head>
<body style="margin:0px;padding:0px;">
<div id="lol" style="width:100px;height:100px;position:absolute;left:0px;top:0px;background-color:#000;"></div>
<div id="lol2" style="width:100px;height:100px;position:absolute;left:0px;top:110px;background-color:#000;" onMouseOver="move(this, 400, 400, 30)"></div>
<div id="lol3" style="width:100px;height:100px;position:absolute;left:0px;top:210px;background-color:#000;" onMouseOver="move(this, 800, 600, 30)"></div>
<div id="lol4" style="width:100px;height:100px;position:absolute;left:0px;top:310px;background-color:#000;" onMouseOver="move(this, 300, 800, 30)"></div>
<div id="lol5" style="width:100px;height:100px;position:absolute;left:0px;top:410px;background-color:#000;" onMouseOver="move(this, 1000, 100, 30)"></div>
<div id="lol6" style="width:100px;height:100px;position:absolute;left:0px;top:510px;background-color:#000;" onMouseOver="move(this, 500, 0, 30)"></div>
</body>
<script language="JavaScript">
move(document.getElementById("lol"), 900, 300, 30);
</script>
</html>
x=coordenada X
y=coordenada Y
obj=el div al que le quieres aplicar la función
Prueben el texto que está aca, funciona y queda bonito =D
Al menos en Firefox xD
Cuando descubra como correr IE en Ubuntu lo pruebo xDDD.
EDITO: Acabo de lograr poner IE en Ubuntu, ni yo me lo creo, funcionó a la primera!!! =D
EDITO: Me acabo de dar cuenta que no toma hojas de estilo externas, cuando logre descubrir como hacerlo edito el post xDD.
EDITO: Ya la modifiqué, anda perfecto en IE, tenia algunos bugs, y en Firefox. Y ahora está comentada xDDD.
