This example describes how to move a image on web browser using arrow keys.
Up -> Move Forward
Down -> Move Backward
Left -> Rotate Left
Right -> Rotate Right
jQuery and jQuery Rotate libraries are used.
Javascript code is as follows.
var angle=-90; var maxL = 0; var maxT = 0; var move_amt = 5; function update() { var position = $("#my_image").offset(); $("#t").text(Math.round(position.top)); $("#l").text(Math.round(position.left)); $("#a").text(angle*(-1)%360); } function rotate_left() { $("#my_image").rotate(--angle); update(); } function rotate_right() { $("#my_image").rotate(++angle); update(); } function move_forward() { var position = $("#my_image").offset(); var new_left=position.left+move_amt*Math.cos(angle*(-1)* Math.PI/180); if(new_left < 0) { new_left=0; } if(new_left > maxL) { new_left=maxL; } var new_top=position.top-move_amt*Math.sin(angle*(-1)* Math.PI/180); if(new_top < 0) { new_top=0; } if(new_top > maxT) { new_top=maxT; } $("#my_image").offset({ left: Math.round(new_left), top: Math.round(new_top)}) update(); } function move_backward() { var position = $("#my_image").offset(); var new_left=position.left-move_amt*Math.cos(angle*(-1)* Math.PI/180); if(new_left < 0) { new_left=0; } if(new_left > maxL) { new_left=maxL; } var new_top=position.top+move_amt*Math.sin(angle*(-1)* Math.PI/180); if(new_top < 0) { new_top=0; } if(new_top > maxT) { new_top=maxT; } $("#my_image").offset({ left: Math.round(new_left), top: Math.round(new_top)}) update(); } $(document).ready(function(){ maxL = $('body').width()-64; maxT = $(window).height()-64; $("#my_image").offset({ left: Math.round(maxL/2), top: Math.round(maxT/2)}) $("#my_image").rotate(angle); update(); $("body").keydown(function(e) { if(e.which == 37) { // left rotate_left(); } else if(e.which == 38) { // up move_forward(); } else if(e.which == 39) { // right rotate_right(); } else if(e.which == 40) { // right move_backward(); } }); });
You can try the demo from Here