Mover objetos con las teclas de dirección utilizando la función JavaScript – JavaScript

Mover objeto (imagen) con las teclas de flecha utilizando la función JavaScript – En este ejemplo vamos a aprender a moverse objeto / imagen utilizando las teclas de flecha (izquierda, arriba, derecha y abajo).

Vamos a llamar a la función en la etiqueta cuerpo de “onkeydown” caso, cuando se le Abajo teclas de objeto se moverá en la pantalla del navegador.

JavaScript Fragmentos de código – bienes objetos (Imagen) con las teclas de flecha utilizando la función JavaScript

función de JavaScript

<script type="text/javascript">
//init object globally
var objImage= null;
function init(){
objImage=document.getElementById("image1");
objImage.style.position='relative';
objImage.style.left='0px';
objImage.style.top='0px';
}
function getKeyAndMove(e){
var key_code=e.which||e.keyCode;
switch(key_code){
case 37: //left arrow key
moveLeft();
break;
case 38: //Up arrow key
moveUp();
break;
case 39: //right arrow key
moveRight();
break;
case 40: //down arrow key
moveDown();
break;
}
}
function moveLeft(){
objImage.style.left=parseInt(objImage.style.left)-5 +'px';
}
function moveUp(){
objImage.style.top=parseInt(objImage.style.top)-5 +'px';
}
function moveRight(){
objImage.style.left=parseInt(objImage.style.left)+5 +'px';
}
function moveDown(){
objImage.style.top=parseInt(objImage.style.top)+5 +'px';
}
window.onload=init;
</script>

Código fuente HTML con JavaScript

<!--JavaScript - Move Object with Arrow Keys using JavaScript Function.-->
<html>
<head>
<title>JavaScript - Move Object with Arrow Keys using JavaScript Function.</title>
<script type="text/javascript">
//init object globally
var objImage= null;
function init(){
objImage=document.getElementById("image1");
objImage.style.position='relative';
objImage.style.left='0px';
objImage.style.top='0px';
}
function getKeyAndMove(e){
var key_code=e.which||e.keyCode;
switch(key_code){
case 37: //left arrow key
moveLeft();
break;
case 38: //Up arrow key
moveUp();
break;
case 39: //right arrow key
moveRight();
break;
case 40: //down arrow key
moveDown();
break;
}
}
function moveLeft(){
objImage.style.left=parseInt(objImage.style.left)-5 +'px';
}
function moveUp(){
objImage.style.top=parseInt(objImage.style.top)-5 +'px';
}
function moveRight(){
objImage.style.left=parseInt(objImage.style.left)+5 +'px';
}
function moveDown(){
objImage.style.top=parseInt(objImage.style.top)+5 +'px';
}
window.onload=init;
</script>
</head>
<body onkeydown='getKeyAndMove(event)'>
<h1>JavaScript - Move Object with Arrow Keys using JavaScript Function.</h1>
<h2>Use Arrow keys to move object left, top, right and down.</h2>
<img id="image1" src="Images/ihelp1.png" alt="includehelp.com"/>
</body>
</html>

Resultado

JavaScript - Move Object with Arrow Keys using JavaScript Function - 4
clic for DEMO y rarr;


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *