Continuous movement of image in screen

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

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() 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 language='JavaScript' type='text/JavaScript'>
<!--
function reset1(){
clearTimeout(my_time);
document.getElementById('i1').style.left= "500px";
document.getElementById('i1').style.top= "100px";
document.getElementById("msg").innerHTML="";

}



function move_img(str) {

var x=document.getElementById('i1').offsetTop;
x= x +100;
document.getElementById('i1').style.top= x + "px";

}

function disp(){
var step=1; // Change this step value
//alert("Hello");
var y=document.getElementById('i1').offsetTop;
var x=document.getElementById('i1').offsetLeft;
if(y < 600 ){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 movment
}
}
//////////////////////

}

function timer(){
disp();
var y=document.getElementById('i1').offsetTop;
var x=document.getElementById('i1').offsetLeft;
document.getElementById("msg").innerHTML="X: " + x  + " Y : " + y
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


plus2net.com




More on JavaScript Image Object
Image SlideShow Script using navigational buttons
Image Loading to cache while page load by Image object
Reloading the image without refreshing the page
Image Rotator Script for automatic Slideshow
Image Move across by button click
Image Move continuously across screen
Image offSetLeft and offSetTop to get position of the image from left and top
Image Position : Positioning an image by assigning value to style.top and style.left
Image width: Managing width of the image
Image height: managing height of the image
Image align: Image align left or right
Image border: adding and removing border from Image
Image alt: updating or reading alt message of image
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.

Post your comments , suggestion , error , requirements etc here .




We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2020 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer