1

ここに画像の説明を入力

パズル

  1. +=関数が少し振動するパターンになる理由がわかりません。振動パターンには加算の符号を変更する必要があると予想しましright: '+=50'たが、いいえ。100、150、200、250 などと予想していましたが、50,0, 50, 0, 50, 0 のように動いているように見えますが、なぜですか?

  2. のようなもので振動ドットを作成するにはどうすればよい+=50/log(time)ですか?

試行 1: jQuery での増分加算を理解しようとする

<!DOCTYPE html>
<html>
<head>
  <style>
div { 
background-color:#bca; 
width:100px; 
border:1px solid green;
}
</style>
  <script src="scripts/jquery-1.7.2.min.js"></script>
</head>
<body>

<div id="clickme">
  Click here
</div>
<div    id='ball'
    style='width:100px; height:100px; position:relative; left:10px;'></div>

<script>
    // PASTE T2 or T3 from below.
</script>
</body>

トライアル 2: 振動を制御するボタン、なぜ 0-50-0-50-etc?

    /*TODO: automatically trigger*/
    /*TODO: Traversing wave with 50/log(time)*/
    $('#clickme').click(function() {
      $('#ball').animate({
        opacity: 0.25,
        left: '+=50',  // I CANNOT UNDERSTAND THIS: functionality and how time?
        right: '+=50',
        height: 'toggle'
      }, 2000, function() {
        // Animation complete.
      });
    });

トライアル 3: setInterval を使用してコードをすぐに動作させようとしていますが、遅延がどこにあるかはわかりませんが、とにかく再び燃えている、つまり動作していません...以下で

    while (true)
    {
            setInterval(
                    $('#ball').animate({
                          opacity: 0.25,
                          left: '+=50',
                          right: '+=50',
                          height: 'toggle'
                          }, 5000, function() {
                          // Animation complete.
                          }),
                    10000
                    );
    };

Ps ...以下をすばやくテストするには、 を使用します$ mkdir scripts; cd scripts; wget http://code.jquery.com/jquery-1.7.2.min.js。

4

1 に答える 1

2

これは、次のようなものから始めることができます。

<div id='ball' style='width:100px; height:100px; position:relative; top:0px; left:0px;'>                    
</div>
<script>
    var angle = -180;
    var left = 0;
    var topv = 0;
    function updatePos() {
       angle = angle + 2;
       left += Math.cos(angle/360*Math.PI);
       $('#ball').css('left',left);
       topv += Math.cos(angle/360*Math.PI);
       $('#ball').css('top',topv);    
    }
    setInterval('updatePos()',10);
</script>

     

振動について尋ねていたので、ログの代わりにコサインを使用しました。簡単に置き換えることができます。

編集:最後のサンプルでは、​​いくつかの問題があります:

  • whileループは必要ありません。各ミリ秒setInterval(callback,interval)を呼び出します（そして、停止するまで）callbackintervalclearInterval()
  • アニメートやそのような機能を使用する場合は、それだけに依存して「上」にとどまるべきだと思います。または、イベントキュー（あなたのものと組み込みのもの）に干渉したり、いじったりするリスクがあります
于 2012-06-02T06:45:12.597 に答える