0

猫が左から右に走り、向きを変えて右から左に走るというアニメーション GIF があります。私のコードのすべてが正しいようです。コードを複雑にする前に、完璧に動作するように見えましたが、移動時にgifがフリーズしていました。コードを修正しましたが、gif が他の gif に逆戻りしません。左から右に走り、後ろに走るだけです。コードにエラーが見つからないようです。誰か助けてくれませんか。

<html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
#container {
    background:url(catBack1200.jpg) no-repeat;
    width:1200px;
    height:440px;
}
#catbox {
    position:absolute;
    top:330px;
    left:10px;
}
</style>
<script type="text/javascript">
  var switchDirection = false;
  function doAnimation() {
  var catbox = document.getElementById("catbox");
  var catimg = document.getElementById("cat");
  var currentLeft = catbox.offsetLeft;
  var newLocation;

  if (switchDirection == false)
  {
      newLocation = currentLeft + 3;
      catimg.src == "ani_cat.gif";

      if (currentLeft >= 600)
      {
          switchDirection = true;
      }
  }
  else
  {
      newLocation = currentLeft - 3;
       catimg.src == "ani_cat_rev.gif";

      if (currentLeft <= 0)
      {
          switchDirection = false;
      }
  }

  catbox.style.left = newLocation + "px";
  }
</script>
</head>

<body onload="setInterval(doAnimation, 10)"> 
<div id="container">
<div id="catbox">
    <img src="ani_cat.gif" id="cat" width="100" height="60" alt="busy kitty" />
</div>
</div>
</body>
</html>
4

2 に答える 2

2

画像を設定するときは、「==」の代わりに「=」を使用してください。これはタイプミスだと思います。

すべてのアニメーションに src を設定しないでください。切り替え時に設定するのではなく：

if (switchDirection == false) {
    newLocation = currentLeft + 3;

    if (currentLeft >= 600) {
        catimg.src = "ani_cat_rev.gif";
        switchDirection = true;
    }
} else {
    newLocation = currentLeft - 3;

    if (currentLeft <= 0) {
        catimg.src = "ani_cat.gif";
        switchDirection = false;
    }
}
于 2013-10-13T14:54:42.380 に答える
0 
catimg.src == "ani_cat.gif";
catimg.src == "ani_cat_rev.gif";

==ここに問題があるかもしれません: の代わりに等号演算子を使用しました=。

于 2013-10-13T14:46:39.610 に答える