Moving image across screen from left to right and top to bottom

We have seen how to move image in the screen , we will extend the same technique to move image continuously vertically from top to bottom and then horizontally from left to right.

Moving image continuously on screen using JavaScript Timer and image style left and top properties

br>

Use of timer

To give continues move command we have used timer using setTimeout function. The same timer get reset by using clearTimeout function. Each reset will position the image at fixed location. For this we have used a function reset1()
Demo of moving image across screen
Here is the complete code of the above demo
More demo at the end of the page

<html>
<head>
<title>Demo of Image moving across screen in JavaScript</title>
<script >
<!--
function reset1(){
clearTimeout(my_time);
document.getElementById('i1').style.left= "500px";
document.getElementById('i1').style.top= "100px";
document.getElementById("msg").innerHTML="";
}

function disp(){
var step=1; // Change this step value
//alert("Hello");
var y=document.getElementById('i1').offsetTop;
var x=document.getElementById('i1').offsetLeft;
document.getElementById("msg").innerHTML="X: " + x  + " Y : " + y
if(y < 400 ){y= y +step;
document.getElementById('i1').style.top= y + "px"; // vertical movment
}else{
if(x < 800){x= x +step;
document.getElementById('i1').style.left= x + "px";//horizontal move
}
}
//////////////////////
}

function timer(){
disp();
my_time=setTimeout('timer()',10);
}
//-->
</script>
</head>
<body >
<img src=images/help.jpg id='i1' 
  style="position:absolute; left: 500; top: 100;">
<br><br><br><br>
<input type=button onClick=timer() value='Start'>
<input type=button onClick=reset1() value='Reset'>
<div id='msg'></div>

</body>
</html>

More demo on moving image in screen Moving image vertically within two boundaries Moving image horizontally within two boundaries Moving image randomly within four boundaries Moving image by using up, down, left & right keys Moving two images corssing Moving image in four sides of the browser

Image Object Movement of image by button click

Subscribe to our YouTube Channel here

aza said	16-01-2016
pls help me to make an image to move from left to right using javascript

Renee	15-05-2016
I pasted the above entire code and tried using it with teacher's car. Does the size of the object matter? What's the largest object size I can use?

Saravanan	28-07-2016
Could you please add circle movement of image. For example shark is rotating the boat.

Sakunne	28-11-2016
Is it possible to move an object according to certain rules, parallel to line or in given distance from circle or whatever custom line Thank you in advance

smo1234	02-12-2016
By adjusting X , Y values we can move the image in any direction. We can apply math formula to work out different X , Y values to move the image in an circle.

Continuous movement of image in screen

Use of timer

Subscribe