Question

我正在研究这个动画鱼缸我有一条鱼要移动我只是无法弄清楚为什么其他2只不动。如果有人可以给我一个暗示我可能搞砸的地方或一个可能对我有帮助的网站。我一直在寻找这个动画鱼都找不到任何东西。感谢

<!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>

我不知道如何让其他两条鱼去哪有人有一个网站或其他东西可以解释给我

Answer 1

如果我错了，请原谅我，但看起来你只是在剧本中为fish1制作动画。

你需要有一个fish2Swim和fish3Swim;更好的是一个名为fishSwim的函数，你可以传递相关鱼的数量。

我会做这样的事情：

function fishSwim(fishNumber) {
document.getElementById("fish"+fishNumber).style.left = horizontal[fishPos[fishNumber] + "px";
++fishPos[fishNumber];
if (fishPos[fishNumber] == 49)
        fishPos[fishNumber] = 0;
}

所以你需要创建一个数组Fish位置（称为“fishPos”，其中索引将是鱼的数量。请随时向我询问更多相关信息：）

动画鱼缸

1 个答案: