0

この問題は非常に簡単なはずですが、私はこれらの方法に慣れていません。

つまり、これが私が達成したいことです: div を指定されたピクセル数だけ移動するアニメーションをトリガーしたいと考えています。それでおしまい。画面上に各キーボードの矢印を表すボタンがあるとします。矢印をクリックするたびに、ボックスは現在の位置から指定されたピクセル数だけ適切な方向に移動します。

私はもともとトランジションを使用してこれを達成しましたが、一度しか機能しません。私はこの非常に基本的な問題に対する答えを数時間探していましたが、心からイライラしています。

基本的なjavascriptで答えてください。このプロジェクトには外部ライブラリを使用したくありません。

(編集) すべてのブラウザーでこれを達成する方法を尋ねているわけではありません。どのブラウザでもそれを達成する方法を尋ねています。

4

3 に答える 3

1

これがJavascript/jQueryのデモです：

var $ball = $('#ball'); // cache our ball ;)

$('.btn').on('click',function(){
  var direction = $(this).data('move');
  $ball.stop(1); // clear animation queue
  switch (direction){
    case 'up':
      $ball.animate({top:'-=30'});
      break;
    case 'down':
      $ball.animate({top:'+=30'});
      break;
    case 'left':
      $ball.animate({left:'-=30'});
      break;
    case 'right':
      $ball.animate({left:'+=30'});
      break;
  }
});
#ball{
  position:absolute;
  left:60px;
  top:60px;
  width:20px;
  height:20px;
  background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="btn" data-move="up">U</button>
<button class="btn" data-move="down">D</button>
<button class="btn" data-move="left">L</button>
<button class="btn" data-move="right">R</button>

<div id="ball"></div>

デモjsBin

于 2012-05-07T20:23:00.733 に答える
1

ElementToMove が絶対に CSS に配置されていると仮定すると、理論的には次のようなものをクリック ハンドラーに追加できます。

var elementToMove = document.getElementById( 'ElementToMove' );
while ( elementToMove.left < elementToMove.left + 10 )
{
  window.setTimeout(
    function ( )
     {
       elementToMove.style.left = (elementToMove.style.left + 1) + "px";
     },
     100
   );
 }

ライン 2の数値10は、ボタンがクリックされたときに移動する所定の量になります。

基本的に、これが行うことは、オブジェクトが必要なだけ移動するまで、オブジェクトを 10 分の 1 秒ごとに 1 ピクセル移動することです ( 1009 行目)。で同じことを達成することもできsetInterval( )ます。

于 2012-05-07T20:28:16.950 に答える
0

jqueryを使用して、クリックをキャプチャしました。私はdivを移動するために普通の古いjavascriptを使用しました。JavaScript で多くの DOM 操作を行いたい場合は、jquery に慣れる必要があると思います。

<html>
<head>
    <title>move it</title>
</head>
<body>
    <div id="box" style="position: absolute; left: 2px; top: 5px; width: 100px; height: 100px;
        background-color: Red;">
    </div>
    <div id="buttons" style="position: absolute; left: 2px; top: 100px;">
        <button id="down"  >
            down
        </button>
        <button id="right"  >
            right
        </button>
    </div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

    function moveDown() {
        var xx = document.getElementById('box');
        var top = parseInt(xx.style.top);
        xx.style.top = top + 12 + "px";
        console.log(xx.style.top);
    }

    function moveRight() {
        var xx = document.getElementById('box');
        var left = parseInt(xx.style.left);
        xx.style.left = left + 12 + "px";
        console.log(xx.style.top);
    }

    $(function () {
        $("#down").click(moveDown);
        $("#right").click(moveRight);
    });

</script>
</html>
于 2012-05-07T20:29:10.083 に答える