SHARE
TWEET

JavaScript Animation 1

redandwhite Mar 17th, 2012 38 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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>
RAW Paste Data
Top