How to animate an object in Javascript

In this article we will discuss about how to animate an object in JavaScript.
  • 2079

In Javascript animation of the DOM Objects like images or div etc. We can animate the object in Javascript and if we want to move the object in right direction from the initial position then we have to write objectid.style.left = (object.style.left+10)+'px'; then it will move the object which we have taken from left direction to the right 10 pixels from its current position.

JavaScript Code:

<html>

<head>

    <title>Animation in JavaScript</title>

    <script type="text/javascript">

<!--

        var imgObject = null;

        function init() {

            imgObject = document.getElementById('Image');

            imgObject.style.position = 'relative';

            imgObject.style.left = '0px';

        }

        function moveinRight() {

            imgObject.style.left = parseInt(imgObject.style.left) + 10 + 'px';

        }

        window.onload = init;

//-->

    </script>

</head>

<body>

    <form>

    <img id="Image" src="file:///D:/Images/Winter.jpg" height="30%" width="30%"></img>

    <p>

        Click button below to move the image to right</p>

    <input type="button" value="Click" onclick="moveinRight();" />

    </form>

</body>

</html>

Output:

Image29.jpg

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2019 DotNetHeaven. All rights reserved.