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.


rotate in direction

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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -