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

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

How can I move an image using JavaScript?
What are the different techniques to animate the movement of an image in JavaScript?
Can I control the speed and direction of the image movement?
How can I make an image move smoothly across the screen?
Are there any JavaScript libraries or frameworks specifically designed for animating image movement?
Can I move an image in response to user interaction, such as mouse movements or button clicks?
What are some best practices for optimizing the performance of moving images in JavaScript?
Is it possible to create complex animations involving multiple images moving together?
How can I detect collisions or interactions between moving images in JavaScript?
Are there any limitations or considerations when moving images on different devices or browsers?

Feel free to ask for further clarification or if you have any specific questions about moving images in JavaScript!
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