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.


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>
Image Object Movement of image by button click

Subscribe

* indicates required
Subscribe to plus2net

    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-2022 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer