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>
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.
✖
We use cookies to improve your browsing experience. . Learn more