0

这个问题应该很简单，但我是这些方法的新手。

简而言之，这就是我想要完成的：我想触发一个动画，将 div 移动指定数量的像素。而已。假设我在屏幕上有代表每个键盘箭头的按钮。每次单击箭头时，框将从其当前位置沿适当方向移动指定数量的像素。

我最初使用过渡来完成此操作，但它只工作一次。几个小时以来，我一直在寻找这个非常 BASIC 问题的答案，真的很沮丧。

请用基本的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
   );
 }

第102 行中的数字将是单击按钮时要移动的预定量。

本质上，它的作用是每十分之一秒（第1009 行）将对象移动 1 个像素，直到它移动到您想要的距离为止。你也可以完成同样的事情setInterval( )。

于 2012-05-07T20:28:16.950 回答
0

我使用 jquery 来捕获点击。我使用普通的旧 javascript 来移动 div。如果你想在 javascript 中做很多 DOM manip，我相信你会想要熟悉 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 回答