Hello darling, i'm back home! 
Movimiento básico de imagenes en Javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
<title>Hello</title>
<!------------SMFPERSONAL.NET------------>
<script type="text/javascript">
x= 10; //Eje X
y= 10; //Eje Y
function Move(dir)
{
switch (dir.keyCode)
{
//Up
case 38:
y-= 25;
document.getElementById("imagen").style.top= String(y) + "px";
break;
//Down
case 40:
y+= 25;
document.getElementById("imagen").style.top= String(y) + "px";
break;
//Right
case 39:
x+= 25;
document.getElementById("imagen").style.left= String(x) + "px";
break;
//Left
case 37:
x-= 25;
document.getElementById("imagen").style.left= String(x) + "px";
break;
}
}
</script>
</head>
<body onkeyup="Move(event);">
<img src="Image.png" id="imagen" style="position: relative;" alt="dfdf"/>
</body>
</html>¿Como funciona?- Colocamos la imagen en un lugar especifico:
x= 10; //Left
y= 10; //Top
- Creamos una funcion que lea e interprete los movimientos de las teclas..
switch (dir.keyCode)
{}
- Tenemos que saber cual numero corresponde a cada tecla:
37: izquierda
38: arriba
39: abajo
40: derecha
- Insertamos los valores que vamos a usar, si queremos movernos hacia arriba lo haremos sobre el
Eje Y:
y+= 25;
Si es negativo vamos hacia abajo...
y-= 25;
Confirmamos que usamos el eje Y:
style.top
Pero si usamos el X:
style.left
- Lo hacemos funcionar...
= String(y) + "px";
El string que usamos es la variable que hemos definido hace un segundo: "Y+=..." y como siempre usamos medidas en PX, no CM, no MM, no KM:
Pixels- Por último:
Preparamos al BODY para que utilize nuestro JS
<body onkeyup="Move(event);">
<img src="Image.png" id="imagen" style="position: relative;" alt="dfdf"/>
</body>
Este código mueve una imagen, pude ser un DIV, uan tabla, lo que quieras, editalo a tu gusto
Espero que les sirva, dejen comentarios y dudas, Saludos!
Descargalo:
http://www.smfpersonal.net/downloads.html;sa=view;down=173
Welcome guest
Topic: Movimiento básico de imagenes en Javascript (Read 2136 times)