Animated fish tank
I am working on this animated fish tank I got one of the fish to move I just can't figure out why the other 2 aren't moving. If someone can give me a hint onto where i might be screwing up开发者_如何转开发 or a web site that might help me. I have been looking all over and can't find nothing on this animated fish. Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fish tank</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
var fish1Position = 0;
horizontal = new Array(50);
var fillPosition = 10;
for(var i = 0; i < 50; ++i) {
horizontal[i] = fillPosition;
fillPosition += 10;
}
function fish1Swim() {
document.getElementById("fish1").style.left = horizontal[fish1Position] + "px";
++fish1Position;
if (fish1Position == 49)
fish1Position = 0;
}
function startSwimming() {
setInterval("fish1Swim()",100);
}
// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</head>
<body onload="startSwimming();">
<p><span id="fish1" style=
"position:absolute; left:10px; top:10px"><img src="fish1.gif" alt="Image of a fish" /></span></p>
<p><span id="fish2" style=
"position:absolute; righy:10px; top:120px"><img src="fish2.gif" alt="Image of a fish" /></span></p>
<p><span id="fish3" style=
"position:absolute; left:10px; top:220px"><img src="fish3.gif" alt="Image of a fish" /></span></p>
</body>
</html>
I dont know how to get the other two fish going does anyone have a web site or something that will explain it to me
Forgive me if I'm wrong, but it looks like you're only animating fish1 in your script.
You need to have a fish2Swim and fish3Swim; better yet a function called fishSwim where you pass the number of the fish in question.
I would make something like this:
function fishSwim(fishNumber) {
document.getElementById("fish"+fishNumber).style.left = horizontal[fishPos[fishNumber] + "px";
++fishPos[fishNumber];
if (fishPos[fishNumber] == 49)
fishPos[fishNumber] = 0;
}
So you would need to create an array Fish positions (called "fishPos" where the index would be the number of the fish. Feel free to ask me anything more about this :)
加载中,请稍侯......
精彩评论