javascript – Implement object rotation towards cursor

Question:

There is a circle, you need it to always turn towards the cursor.

How to implement this?

For example, there is a big one with a small circle:

.circle
{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: lightblue;
}
.indicator
{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: darkblue;
  position: absolute;
  left: 80px;
  top: 50px;
}

<div class = "circle" name = "circle"><div class = "indicator" name = "indicator"></div></div>

How to make the big one turn with the small one as an indicator towards the cursor?

Answer:

The old-old script was taken as a basis, but it is working, so here it is.

var elem = $('.indicator');
var x1 = elem.offset().left,
  y1 = elem.offset().top;
var r = 35,
  x, y, isProcessed = false;
$('html').mousemove(function(e) {
  if (!isProcessed) {
    isProcessed = true;
    var x2 = e.pageX,
      y2 = e.pageY;
    y = ((r * (y2 - y1)) / Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1))) + y1;
    x = (((y - y1) * (x2 - x1)) / (y2 - y1)) + x1;
    elem.css({
      marginTop: (y - y1 + 1) + 'px',
      marginLeft: (x - x1) + 'px'
    });
    isProcessed = false;
  }
});

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: lightblue;
  position: relative;
  margin: 30px auto;
}

.indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: darkblue;
  position: absolute;
  left: calc(50% - 5px);
  top: calc(50% - 5px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="circle" name="circle">
  <div class="indicator" name="indicator"></div>
</div>

Post Views: 2