html - How can I move a div with direction in JavaScript? -
there element in hmtl move. simple. problem element should move in specified degrees, example 30° deg. how can in javascript (and css rotate)?
thanks answers.
click somewhere. jsfiddle.net/o9zd5tvp/19/
or run snippet below.
rotate
rotation "in place".
you can move changing position (left , top).
(each element in html block @ point x,y)
don't forget set position: absolute
in css make div
floatable.

var d = 30; document.getelementbyid("div1").style.transform = "rotate("+0+"deg)"; var mx,my; $( "body" ).bind( "mousemove", function(event) { mx = event.clientx; = 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 = - 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);
.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}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> click mouse somewhere. <div id="div1" class="div1">
Comments
Post a Comment