<html> <head> <title>Arrow key movements</title> <script type="text/javascript"> window.onload = function () { var moveDiv = document.getElementById("movingDiv"); window.onkeydown = function(e) { e.preventDefault(); if (!e) { e = window.event; } var keyCode; // pixel wise speed variable var speed = 3; if(e.which) { keyCode = e.which; } else { keyCode = e.keyCode; } //increment/decrement the top or left of the div based on the arrow key movements if(keyCode === 37) { moveDiv.style.left = (parseInt(moveDiv.style.left, 10) - speed) + 'px'; } else if (keyCode === 38) { moveDiv.style.top = (parseInt(moveDiv.style.top, 10) - speed) + 'px'; } else if (keyCode === 39) { moveDiv.style.left = (parseInt(moveDiv.style.left, 10) + speed) + 'px'; } else if (keyCode === 40) { moveDiv.style.top = (parseInt(moveDiv.style.top, 10) + speed) + 'px'; } }; }; </script> <!-- CSS fpr moving Div --> <style type="text/css"> #movingDiv { width: 100px; height: 100px; position: absolute; background-color: #CCC; } </style> </head> <body> <!-- This div element will move , it has CSS style element in the header --> <div id="movingDiv" style="top:0px;left:0px;"> </div> </body> </html><br>
Show this record as plain/text
nopaste service by: Roberto Corrado