Javascript 如何使图像在浏览器中从右向左水平移动？_Javascript

Javascript 如何使图像在浏览器中从右向左水平移动？

javascript

Javascript 如何使图像在浏览器中从右向左水平移动？,javascript,Javascript,我已经成功地使fish1和fish2在屏幕上移动，但是我很难弄清楚如何让fish3从右向左移动。看到它是如何面向左边的，我不希望它向后游。非常感谢您的任何帮助或建议 <!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"> &

我已经成功地使fish1和fish2在屏幕上移动，但是我很难弄清楚如何让fish3从右向左移动。看到它是如何面向左边的，我不希望它向后游。非常感谢您的任何帮助或建议

<!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 Tanks</title>

<script type="text/javascript">
<!-- HIDE FROM INCOMPATIBLE BROWSERS
var fish1Position = 0;
var fish2Position = 0;
var fish3Position = 99;
var horizontal = [];
var fillPosition = 10;
var num = 100;
for(var i = 0; i < 100; ++i) {
        horizontal[i] = fillPosition;
        fillPosition += 10;
}

function fish1Swim() {
        document.getElementById("fish1").style.left = horizontal[fish1Position] + "px";
        ++fish1Position;
        if (fish1Position == num) {
                fish1Position = 0;
}
var tim1 = setTimeout(fish1Swim, 100);
}
function fish2Swim(){
        document.getElementById("fish2").style.left = horizontal[fish2Position] + "px";
         ++fish2Position;
         if (fish2Position == num) {
                 fish2Position = 0;
}
var tim2 = setTimeout(fish2Swim, 200);
}

function fish3Swim() {
     document.getElementById("fish3").style.left = horizontal[fish3Position] + "px";
     ++fish3Position;
     if (fish3Position == num) {
fish3Position = 99;
}
var tim3 = setTimeout(fish3Swim, 300);
}

function startSwimming() {
        fish1Swim();
        fish2Swim();
        fish3Swim();
}

// 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>
<br />
<br />
<br />
<br />
<p><span id="fish3" style="position:absolute; left:10px; top:100px"><img src="fish3.gif" alt="Image of a fish" /></span></p>
<br />
<br />
<br />
<br />
<p><span id="fish2" style="position:absolute; left:10px; top 150px"><img src="fish2.gif" alt="Image of a fish" /></span></p>
</body>
</html>

我猜你只是想减少位置，所以：

--fish3Position;

而不是++fish3Position

对于支持CSS3转换的浏览器，您应该能够添加style=transform:rotateY180deg；到fish3 img标签

如果希望鱼来回游动，则可能需要使用图像编辑程序创建镜像，并在鱼到达视口边界时交换左右手版本。这项技术还有助于确保不支持CSS3转换的旧浏览器能够正确显示

另外，可能值得一看，以了解更多关于和测试对CSS3转换的浏览器支持。

非常感谢！当然，解决办法必须很简单。感谢您的帮助。好吧，它移到左边很好，但是fish3图像停止并不像其他图像那样重置。@贾斯汀：没错，您必须检查它是否为0，然后将其设置回99。所以fish3position==0。