How to animate an object in Javascript

Posted in JavaScript | JavaScript Advance July 18, 2019
Tags: JavaScript, Animation in JavaScript, object in JavaScript
In this article we will discuss about how to animate an object in JavaScript.
  • 2264

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

    © 2020 DotNetHeaven. All rights reserved.