Question

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

简而言之，这就是我想要实现的目标：我想要触发一个将div移动指定像素数的动画。而已。让我们想象一下，屏幕上的按钮代表每个键盘箭头。每次单击箭头时，该框将从当前位置沿适当的方向移动指定的像素数。

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

请用基本的javascript回答。我宁愿不为这个项目使用外部库。

（编辑）我不是要问如何在所有浏览器中实现这一点。我问的是如何在任何浏览器中完成它。

Answer 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>

demo jsBin

Answer 2

假设您的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将是单击按钮时要移动的预定数量。

基本上它的作用是每十分之一秒移动一个对象1个像素（第9行中的100），直到它移动到你想要的范围。您也可以使用setInterval( )完成相同的操作。

Answer 3

我使用jquery来捕获点击。我使用普通的旧javascript来移动div。如果你想在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>

使用CSS移动div

3 个答案:

demo jsBin