MOVIMIENTO SIN CANVAS

Script para mover un elemento por pantalla

Comienzo mi labor en programación con HTML5, Javascript y CSS, con un ejercicio simple, en el que “muevo” un elemento div, sacándolo del flujo de pantalla, con un posicionamiento absoluto. Es algo rudimentario y ya iré puliendo la técnica, pero es igualmente válido e instructivo.

>> PINCHA AQUÍ << Para ver el resultado.

<html>

<head>

	<title>Movimiento sin canvas</title>
	<script type="text/javascript">

          
// DECLARACIÓN GLOBAL


                  var velocidad = 60/1000;
		  var posHor = 0;
		  var posVer = 0;

		  // document.write(":"+parseInt(posHor,10));

		  function movCaja() {
           
           posHor = posHor + 1;
           console.log(posHor);
           document.getElementById("caja").style.left= posHor;





           posVer = posVer + 1;
           document.getElementById("caja").style.top= posVer;
     		 
     		

         	
            

         }

	</script>

</head>

<body onLoad="setInterval(movCaja,velocidad)" style="background-color: #cccccc;">

<div id="caja"  style="width: 200px; height: 100px; top:50; left: 50; position: absolute ;  background-color: #000000;"></div>



</body>













</html>

61 Vistas

¡Comparte!

Deja un comentario