English 中文(简体)
Javascript Basics Tutorial

JavaScript Objects

JavaScript Advanced

JavaScript Useful Resources

Selected Reading

Javascript - Animation
  • 时间：2024-12-22

JavaScript - Animation

Previous Page Next Page  

You can use JavaScript to create a complex animation having, but not pmited to, the following elements −

    Fireworks

    Fade Effect

    Roll-in or Roll-out

    Page-in or Page-out

    Object movements

You might be interested in existing JavaScript based animation pbrary: Script.Aculo.us.

This tutorial provides a basic understanding of how to use JavaScript to create an animation.

JavaScript can be used to move a number of DOM elements (<img />, <span> 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 function after duration milpseconds from now.

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

    clearTimeout(setTimeout_variable) − This function calls clears any timer set by the setTimeout() functions.

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.

// Set distance from left edge of the screen.
object.style.left = distance in pixels or points; 

or

// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;

Manual Animation

So let s implement one simple animation using DOM object properties and JavaScript functions as follows. The following pst 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 initiapzation function init() to initiapze imgObj where we have set its position and left attributes.

    We are calpng initiapzation function at the time of window load.

    Finally, we are calpng 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

Try the following example.

<html>   
   <head>
      <title>JavaScript Animation</title>      
      <script type = "text/javascript">
         <!--
            var imgObj = null;
            
            function init() {
               imgObj = document.getElementById( myImage );
               imgObj.style.position=  relative ; 
               imgObj.style.left =  0px ; 
            }
            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 10 +  px ;
            }
            
            window.onload = init;
         //-->
      </script>
   </head>
   
   <body>   
      <form>
         <img id = "myImage" src = "/images/html.gif" />
         <p>Cpck button below to move the image to right</p>
         <input type = "button" value = "Cpck Me" oncpck = "moveRight();" />
      </form>      
   </body>
</html>

Output