2011-07-15 5 views
0

私は正常にfish1とfish2を画面上で動かしましたが、私は魚を右から左に動かす方法を考え出すのが苦労しています。左に向いているのを見て、私はそれを逆流させたくありません。どんな助けや助言も大歓迎です!画像を右から左にブラウザを横切って水平に移動するにはどうすればよいですか?

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

答えて

0

私は、あなただけの位置をデクリメントしたいと思います:

--fish3Position; 

の代わり++fish3Position;

+0

ありがとうございます!もちろん、ソリューションは単純なものでなければなりませんでした。あなたの助けに感謝。 – Justin

+0

まあ、それはちょうど良い左に移動しますが、fish3画像は停止し、他のものと同じようにリセットされません。 – Justin

+0

@ジャスティン:それは正しいです、それが '0'であるかどうかをチェックしてから' 99'に​​戻す必要があります。だから 'fish3Postion == 0'。 – pimvdb

0

CSS3変換をサポートするブラウザでは、fish3のimgタグにstyle="transform:rotateY(180deg);"を追加できるはずです。

&が泳ぐようにするには、画像編集プログラムを使用して鏡像を作成し、魚がビューポートの境界に達すると左の<→スワップ版を使用することができます。このテクニックは、古いブラウザ(CSS3変換サポートなし)が正しく表示されるようにするのにも役立ちます。

また、は、CSS3変換の詳細(およびテスト用のブラウザのサポート)をご覧ください。

関連する問題