0

ここに私の個人的なウェブページがあります。

PozSanta.gif の移動には、この html タグを使用しました。

<div id="animatedImage" style="position:fixed;padding-top:550px;z-index:99;left:1px;bottom:1px;">
 <img src="http://www.fatihtoprak.com/wp-content/themes/PozWhite/assets/img/Poz_Santa.gif" alt="animatedImage" />
</div>
<script type="text/javascript" src="http://www.fatihtoprak.com/wp-content/themes/PozWhite/assets/js/PozSanta.js"></script>

たとえば、Pozsanta.gif が画面の最後に来ると、右に戻る必要があります (右から左に歩く) ? それはどのように可能ですか？

Js ファイル:

http://www.fatihtoprak.com/wp-content/themes/PozWhite/assets/js/PozSanta.js

ありがとう。

4

3 に答える 3

2

これがあなたのコードです。画像がgif、jpg、または常に画像にフリップを適用できるその他の形式であるかどうかにかかわらず、画像を反転するには単純なcssが必要です。

ここであなたの作業例をチェックしてください

注:画像は撮影時に画面の幅に沿って移動します。コピーしてデスクトップで確認してください。

<!DOCTYPE html>
<html>
<style>
.left {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}
.right {
        -moz-transform: scaleX(1);
        -o-transform: scaleX(1);
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

</style>
<body>
<div id="animatedImage" style="position:fixed;padding-top:550px;z-index:99;left:1px;bottom:1px;">
 <img id="img1" src="http://www.fatihtoprak.com/wp-content/themes/PozWhite/assets/img/Poz_Santa.gif" alt="animatedImage" />
</div>
<script>
var distanceBall=0; 
var directionBall=1; 
document.getElementById('animatedImage').style.top = 10;
document.getElementById('animatedImage').style.left = 10;
var timerToggle=null; 
animateBall();
var setting = 0;          

  function animateBall() {   
  document.getElementById("animatedImage").style.left=distanceBall + "px";

  distanceBall+=directionBall;

  if (distanceBall>window.screen.width - 70) { 
  document.getElementById('animatedImage').style.top = 10;
  document.getElementById('animatedImage').style.left = 10;
  directionBall = -1;
  document.getElementById('img1').className = 'left';
  }

  if (distanceBall<0) {
  directionBall = 1;
  document.getElementById('img1').className = 'right';
  }

  timerToggle=setTimeout(function() { animateBall(); },1);
  }
</script>
</body>
</html>
于 2012-12-28T04:47:15.640 に答える
1

この行に条件を追加します。

  if (0 > distanceBall && directionBall == 1) 
  { 
    directionBall=0; 
  }
  else if (distanceBall == 0 && directionBall == 0) 
  { 
    directionBall = 1; 
    distanceBall = 1;
  }

次に、方向を交互にします。

  if (directionBall == 1) 
  { 
     distanceBall += 1;
  }
  else
  {
     distanceBall -= 1;
  }
于 2012-12-28T02:48:16.220 に答える
-1

画像を反転することは 1 つのことですが、アニメーション gif は一連の画像が並んで次々に再生され、必要に応じてフィルム リールを視覚化し、gif の各動きを同じように画像化します。もの。したがって、問題は画像を反転することではなく、画像の行全体を反転することです。これは、javascriptまたは私が考えることができるサーバー/クライアントベースの言語ではなく、不可能であると確信しています。オフハンド。

ただし、考えられることの 1 つは、gif からすべてのフレームを抽出し、それらをスプライト スタイルの画像にすることです。また、巧妙なスクリプト フリップブックを使用して、スプライト画像が画面上をフレームごとに移動するようにします。

この特定のソフトウェアをテストしたわけではありませんが、gif フレームを抽出するための Google 経由の最初の結果の 1 つはhttp://www.addictivetips.com/windows-tips/how-to-extract-frames-from-gif-animationです。 -image/で始められるかもしれません。

于 2012-12-28T02:50:18.503 に答える