Explain about Moving Images in java script.

JavaScript can be used to move a number of DOM(Document Object Model) elements (,

or any other HTML element) around the page according to some sort of pattern determined by a logical equation or function.

JavaScript provides the following two functions to be frequently used in animation programs.

·        setTimeout( function, duration) − This function calls functionafter duration milliseconds from now.

·        setInterval(function, duration) − This function calls function after every duration milliseconds.

JavaScript can also set a number of attributes of a DOM object including its position on the screen. You can set top and left attribute of an object to position it anywhere on the screen. Here is its syntax.

To Set distance from left edge of the screen.

object.style.left = distance in pixels or points;

So let's implement one simple animation using DOM object properties and JavaScript functions as follows. The following list contains different DOM methods.

·        We are using the JavaScript function getElementById() to get a DOM object and then assigning it to a global variable imgObj.

·        We have defined an initialization function init() to initialize imgObjwhere we have set its position and left attributes.

·        We are calling initialization function at the time of window load.

·        Finally, we are calling moveRight() function to increase the left distance by 10 pixels. You could also set it to a negative value to move it to the left side.

Example

         Click button below to move the image to right