I have never done animation in javascript and want to know how. What I want to learn how to do is basically take a ball image and make it go around the four corners of the broswer window. Anybody know how?
Printable View
I have never done animation in javascript and want to know how. What I want to learn how to do is basically take a ball image and make it go around the four corners of the broswer window. Anybody know how?
http://www.google.com/search?q=javas...utf-8&oe=utf-8
Google does. Come back here when you run into errors with the code.
Ok, here is my code. I can get the ball to move back and forth but how do I get it to go up and down? Here is what I mean...What i want as the end result is for it to go all the way around the screen, and, until the user clicks the stop action button, it will just keep going.
I know i can change from left and right:
top up and downCode:document.all.BallID.style.left = currentPos + moving;
but how to get it to go around and round and round?(follow the arrows)Code:document.all.BallID.style.top = currentPos + moving;
--<-
:-- :
:-- :
v--^
:-- :
:-- :
-->-
Code:
<html>
<head>
<title>My animation</title>
<SCRIPT LANGUAGE = "JavaScript1.2">
<!--
var moving=0;
var movingamount =10
function moveBall(currentPos){
moving += movingamount;
document.all.BallID.style.left = currentPos + moving;
if(moving > 670)
{
movingamount = -10;
}
if(moving < 0)
{
movingamount = 10;
}
}
-->
</script>
</head>
<body topmargin=0 leftmargin="0">
<SPAN ID=BallID STYLE="position:absolute; left=50; top=50"><img name = "8Ball" src="eightball.gif"></SPAN>
<form name=sample2>
<input type="button" value=" Move Eightball " name="move" onClick="movement=setInterval('moveBall(40)', 50);">
<input type="button" value=" Stop action " name="move" onClick="clearInterval(movement);">
</form>
</body>
</html>
Can anyone help me with this?