Question

我想移动HMTL中有一个元素。很简单。问题是元素应该以指定的度数移动，例如30°。如何在JavaScript中（以及使用CSS旋转）？

感谢所有答案。

Answer 1

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

＆＃13;

(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);
})();

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

点击某处。 jsfiddle.net/o9zd5tvp/19/
或者在下面运行片段。

Rotate只能在一个地方进行轮换＆＃34;。

您只能通过更改位置左和顶部来移动。
^{（HTML中的每个元素只是点x，y处的块）}

不要忘记在css中设置position: absolute以使div 浮动。

<小时/>

＆＃13;

var d = 30;
document.getElementById("div1").style.transform = "rotate("+0+"deg)";


var mx,my;
$( "body" ).bind( "mousemove", function(event) {
    mx = event.clientX;
    my = event.clientY;
});
var div = document.getElementById("div1");
$( "BODY" ).bind( "click", function(event) {
   $('#div1').animate({ 
       left: mx-32,
       top:  my-32,
   },300 + Math.random()*600)
});
setInterval(function(){
    var dx = mx - div.offsetLeft-32;
    var dy = my - div.offsetTop-32;
    var v1 = {x: div.offsetLeft+32, y: div.offsetTop+32}, 
        v2 = {x: mx, y: my};
    var angleDeg = Math.atan2(v2.y - v1.y, v2.x - v1.x) * 180 / Math.PI ;
    
    div.style.transform = "rotate("+angleDeg+"deg)";
    div.innerHTML = Number(angleDeg).toFixed(2);
},30);

＆＃13;

.div1{
	border: 1px solid black;
	width: 64px;
	height: 64px;
    margin: 0px;
    left:50px;
    top:50px;
    position: absolute;
    display: inile-block;
    text-align:center;
}
BODY,HTML{width:100%;height:100%;a.padding:0px;margin:0px}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click the mouse somewhere.
<div id="div1" class="div1">

＆＃13;

Answer 3

function Moveit() {
  document.getElementById("div1").style.transform = "rotate(-30deg)";
}


function Moveit2() {
  document.getElementById("div1").style.transform = "rotate(30deg)";
}

http://jsfiddle.net/o9zd5tvp/16/

如何在JavaScript中移动带方向的div？

3 个答案: