1

私がこのコードを持っているとしましょう：

<div id="gameFrame">
   <div id="figure"></div>
</div>

Figure div がある場所は、Figure の写真と言えます。キーボードのキーを上下左右に動かして gameFrame 内の図を移動するために jQuery を使用するにはどうすればよいですか?

4

2 に答える 2

1

私のデモを見てください：

$(document).keydown(function(e){
    // Left
    if (e.keyCode == 37) { 
      $("#moveMe").animate({marginLeft: "-=100px"}, {queue:false});
       return false;
    }
    // Top
    if (e.keyCode == 38) { 
      $("#moveMe").animate({marginTop: "-=100px"}, {queue:false});
       return false;
    }
    // Right
    if (e.keyCode == 39) { 
      $("#moveMe").animate({marginLeft: "+=100px"}, {queue:false});
       return false;
    }
    // Bottom
    if (e.keyCode == 40) { 
      $("#moveMe").animate({marginTop: "+=100px"}, {queue:false});
       return false;
    }
});

あなたの場合、各移動後に境界を確認する必要があるため、図はフレームの外に移動しません。

于 2010-11-13T20:12:37.633 に答える
0

キーボードの使用を除いて、あなたがやろうとしていることはすでに jQuery Draggable モジュールで行われています: http://jqueryui.com/demos/draggable/#default。彼らが行ったことを出発点として使用できるかもしれません。実際のコードはhttps://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.draggable.jsです。

欠点は、コードの拡張/変更にかなりの労力を費やさなければならない可能性があり、それでも他の jQuery コードに依存する可能性が高いことです。

繰り返しになりますが、jQuery コードの数分の 1 のサイズで何かを作成できる可能性があります。しかし、他の誰も何も起こさなかった場合に備えて、これを投稿すると思いました。

自分でやりたい場合、一般的なプロセスは次のようになります。

  1. 移動したいアイテムをコンテナ (別の などdiv) でラップし、CSS を使用して位置を相対的に設定します。
  2. 矢印キーのキーボード イベントをバインドする
  3. キーが押されたときに、要素の位置を変更して移動します (leftや などの CSS 属性top) 。
于 2010-11-13T19:54:26.793 に答える