Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Animation</title>
- </head>
- <script language="javascript">
- var ball = new Array(4);
- var curPos = 0;
- var startRolling;
- // assigning ball0.png to ball[0], ball1.png to ball[1], etc
- for (i=0; i < ball.length; i++) {
- ball[i] = "ball"+i+".png";
- }
- var movement = 20;
- function roll() {
- if (curPos == (ball.length-1)){
- curPos = 0;
- } else {
- curPos++;
- }
- // change image source to the current image, e.g. ball[2].png
- document.animatedBall.src = ball[curPos];
- var ballLeft = parseInt(document.animatedBall.style.left);
- ballLeft = ballLeft+movement;
- document.animatedBall.style.left=ballLeft+"px";
- if (ballLeft >=400) {
- movement = -20;
- }
- if (ballLeft < 0) {
- movement = 20;
- }
- }
- </script>
- </head>
- <body>
- <img src="ball0.png" name="animatedBall" style="position:absolute;left:0px;">
- <form style="position:absolute; top:200px;">
- <input type="button" name="run" value="Roll"
- onClick="startRolling=setInterval('roll(parseInt(document.animatedBall.style.left))',60);">
- <input type="button" name="stop" value="Stop Rolling"
- onClick="clearInterval(startRolling);">
- </form>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement