フレーム内のアニメーション写真（またはdiv）

画像はそれ自体ではかなり説明されています。 div "behind"には、スムーズにアニメートしたい小さな正方形の写真がたくさん含まれています。私は本当にjQueryのアニメーションでうまくいかない、誰も私にこれを助けることができる？フレーム内のアニメーション写真（またはdiv）

（ウィンドウが固定され、画像が移動する "内部" それ、ページのロード以来、永遠アニメーション）どのくらいの期間について

enter image description here

出典

2011-02-07 Vitor Reis

これは画像（または画像）上にドラッグ可能な「ウィンドウ」ですか、または「ウィンドウ」が固定されて画像が移動していますか？ –

ウィンドウが固定されていて、画像が「内部」に移動し、ページロード –

私はSIN/COS関数のファンですので、私はあなたと、この問題での私のショットを共有しましょう。

アニメーションが滑らかになるように、永遠に、できるだけ早く実行する機能を持つことを考えます。私はsin/cos関数を使ってdivの新しいx（左）とy（上）座標を決定し、アニメーションの速度と範囲の設定を可能にする一連のパラメータを持っています。

これをHTMLファイルに貼り付けて、ブラウザでテストしてください。

<html> 
    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
    </head> 
    <body> 
     <div id="stuff" style="background: red; width: 200px; height: 200px; margin: auto; position: relative;"> 
     a b c<br /> 
     d e f<br /> 
     g h i<br /> 
     j k l<br /> 
     </div> 
     <script> 
      var start = new Date(); 
      var x_speed = 0.001, // bigger ---> faster 
       y_speed = 0.01, // bigger ---> faster 
       x_multiplier = 300, // how far away I can go on the X axis 
       y_multiplier = 20, // how far away I can go on the Y axis 
       x_offset = 0, 
       y_offset = 0; 

      function animate() { 

       var now = new Date(); 
       var elapsed_time = now - start; 

       var x = Math.sin((elapsed_time)*x_speed) * x_multiplier + x_offset; 
       var y = Math.cos((elapsed_time)*y_speed) * y_multiplier + y_offset; 


       $("#stuff").css({ 
        left : x, 
        top : y 
       }); 

       setTimeout(animate, 0); 
      } 

      setTimeout(animate, 76); 

     </script> 
    </body> 
</html>

出典

2011-02-07 16:32:18

うわー。あなたは上手い！おかげで多く –

共有することを嬉しく思います！パラメータを調整すると、質問のようにアニメーションを遅くすることができます。アニメーションがランダムに見えるように、異なるxとyの速度を持つことを覚えておいてください。 Math.randomのほんの少しでもアニメーションをよりランダムにすることができます...しかしあなたのニーズに合うまで、しばらく実験をする必要があります。 –

？クリック後？

私は今、自分のコンピュータの後ろにないんだけど、このような何かを試してみてください。

クリックした後のためにこれは、次のとおりです。

$("#frame").click(
    function(){ 
     $("#photo").animate({"left": "-=100px"}, function(){ 
      $("#photo").animate({"top": "-=100px"}, function(){ 
       $("#photo").animate({"left": "=100px"}); 
      }); 
     }); 
});

などなど、各行の後にあなたが置くことができます私は3行目と4行目のコードのように改行しています。この方法で、後ろの写真は四角形で動く。

これはまさにあなたが望むものなのかどうかわかりません。

編集：Btw、あなたは、右または上と下に行くことができます、あなたのアニメーションを滑らかにするかもしれないものは、写真を拡大し、それを縮小することです。したがって、例えば "width"パラメータが必要です。 jQueryサイトhereを確認してください。

出典

2011-02-07 16:05:01

が時間を忘れてしまったので永遠にアニメートしていますが、すでにstewebが助けてくれたと思います。（ミリ秒はピクセル数の後に来る）。 –

ありがとうございました。私はどちらも助けてくれました。私はすでにかなり始まりました。 –

あなたはこの

マークアップのような何かができる：

<div id="mask"> 
    <img id="pic" alt="my img" src="http://www.destination360.com/north-america/us/idaho/images/s/idaho-sawtooth-mountains.jpg"> 
</div>

CSS：

#mask{ 
    overflow:hidden; 
    width:100px; 
    height:100px; 
    position:absolute; 
    border:5px solid #000000; 
} 
#mask img{ 
    border:none; 
    position:absolute; 
}

JS：

$('#pic').animate({left:-200},3000).animate({top:-50},3000); /* and so on... */

フィドル：

http://www.jsfiddle.net/steweb/YHAZ9/

編集（永遠にそれをループする）http://www.jsfiddle.net/steweb/YHAZ9/4/

出典

2011-02-07 16:08:19 stecb

それは基本的にそれです。私が永遠に行きたい場合はどうすればいいですか？ –

つまり、そのコードを関数内にラップしてから、setIntervalを使って永遠にループすることができます。fiddleing :) – stecb

私の最後の編集を確認してください:) – stecb

フレーム内のアニメーション写真（またはdiv）

答えて

関連する問題