如何在 JavaScript 中按方向移动 div？

Question

我想移动 HMTL 中的一个元素。很简单。问题是元素应该以指定的角度移动，例如 30\xc2\xb0 度。我如何在 JavaScript 中（以及 CSS 旋转）做到这一点？

\n\n

感谢所有的答案。

\n

Answer 1

如果我理解得很好，您可以使用Math.cos和Math.sin来获取所需向量的水平和垂直分量，然后增加top和left属性：

(function() {
  var box = document.getElementById('box'),
      top = 0,
      left = 0,
      angle = 30 * Math.PI / 180, // 30 degrees
      speed = 1,
      deltaX = Math.cos(angle) * speed,
      deltaY = Math.sin(angle) * speed;
  setInterval(function() {
    box.style.top = (top += deltaY) + 'px';
    box.style.left = (left += deltaX) + 'px';
  }, 60);
})();

#box {
  height: 50px;
  width: 50px;
  position: relative;
  background: blue;
}

<div id="box"></div>