MOVIMIENTO SIN CANVAS

      No hay comentarios en MOVIMIENTO SIN CANVAS

Breve script para mover un elemento por pantalla.

Esta tarde comienzo mi labor en la programación con HTML5, JAVASCRIPT y CSS, con un ejercicio simple, en el que muevo un elemento div, con posicionamiento absoluto, por la pantalla. Es algo rudimentario y ya iré puliendo la técnica, pero es igualmente válido e instructivo.

<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>