Category Archives: jQuery

Move Image Using JavaScript

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.

js_move

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