45 users online (1 members and 44 guests)  

Thread: basic animation


  Results 1 to 2 of 2

Related

  1. CSS 3.0 animation features    Forum: CSS Forum
    Replies: 0
  2. Redirect after animation    Forum: Javascript Forum
    Replies: 0
  3. HELP!Animation with perl    Forum: CGI Perl Forum
    Replies: 2
  4. problems with animation    Forum: Graphics Forum
    Replies: 1
  1. #1
    kayakmaster's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2007
    Posts
    1

    basic animation

    hi

    im new in javascript animation. what is the problem with this simple code, cant make it work.

    Code:
    <html> 
    
    <body>
    <script type="text/javascript">
    
    function doMove() {
    
    virtual board.jpeg.style.left = (virtual board.jpeg.style.left+10)+'px';
    }
    
    </script>
    </body>
    
    </html>
    thanks!
    Last edited by vinyl-junkie; 11-13-2007 at 08:20 AM. Reason: Added code tags

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: basic animation

    Hi there kayakmaster,

    and a warm welcome to these forums.
    what is the problem with this simple code
    Your function doMove() has no event-handler -(onload, onclick, onmouseover etc) to activate it.

    These...virtual, board and jpeg will give undefined errors.

    To make an object - (I am guessing that it is an image here) - move from left to right will require the function to be repeated at regular intervals.
    The setTimeout() function is required for this.

    Here is an example for you to look at...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    #container {
        position:relative;
        margin-top:50px;
     }
    #jpeg {
        position:absolute;
        width:300px;
        height:300px;
     }
    </style>
    
    <script type="text/javascript">
    
       var c=0;           /*this positions the image to the left*/
       var imgWidth=300;  /* this is required for the if argument*/
       var speed=10;      /*this is used with var inc to set movement speed of the image*/
       var inc=2;         /*this is used with var speed to set movement speed of the image*/
    
    window.onload=function() {  /*this is the event handler that calls the doMove() function*/
       doMove();
     }
    function doMove() {
    
       document.getElementById('jpeg').style.left=c+'px';
    
    if(c>=document.body.offsetWidth-imgWidth){    /*this calculates the point when the image reaches page right*/
       return;   /*this will stop the function*/
     }
    
       c+=inc;
    
    setTimeout('doMove()',speed);  /*this repeats the function doMove()*/
     }
    </script>
    
    </head>
    <body>
    
    <div id="container">
    <img id="jpeg" src="http://mysite.orange.co.uk/azygous/images/ball_shad.jpg" alt="">
    </div>
    
    </body>
    </html>
    Last edited by coothead; 11-14-2007 at 05:16 AM.



Tags for this Thread