<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>
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. |