Advertisement
redandwhite

JavaScript Animation 1

Mar 17th, 2012
93
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.25 KB | None | 0 0
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Animation</title>
  6. </head>
  7.  
  8. <script language="javascript">
  9. var ball = new Array(4);
  10. var curPos = 0;
  11. var startRolling;
  12.  
  13. // assigning ball0.png to ball[0], ball1.png to ball[1], etc
  14. for (i=0; i < ball.length; i++) {
  15.     ball[i] = "ball"+i+".png";
  16. }
  17.  
  18. var movement = 20;
  19.  
  20. function roll() {
  21.     if (curPos == (ball.length-1)){
  22.         curPos = 0;
  23.     } else {
  24.         curPos++;
  25.     }
  26.     // change image source to the current image, e.g. ball[2].png
  27.     document.animatedBall.src = ball[curPos];
  28.  
  29.    
  30.     var ballLeft = parseInt(document.animatedBall.style.left);
  31.    
  32.     ballLeft = ballLeft+movement;
  33.    
  34.     document.animatedBall.style.left=ballLeft+"px";
  35.    
  36.     if (ballLeft >=400) {
  37.         movement = -20;
  38.     }
  39.    
  40.     if (ballLeft < 0) {
  41.         movement = 20;
  42.     }
  43. }
  44. </script>
  45. </head>
  46. <body>
  47. <img src="ball0.png" name="animatedBall" style="position:absolute;left:0px;">
  48.  
  49. <form style="position:absolute; top:200px;">
  50. <input type="button" name="run" value="Roll"
  51. onClick="startRolling=setInterval('roll(parseInt(document.animatedBall.style.left))',60);">
  52.  
  53. <input type="button" name="stop" value="Stop Rolling"
  54.     onClick="clearInterval(startRolling);">
  55. </form>
  56.  
  57. </body>
  58. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement