Реализовать вращение объекта по направлению к курсору

#javascript #html #jquery #css

Есть круг, и нужно что бы он всегда поворачивался по направлению к курсору.

Как это реализовать?

Например, есть большой и малый круг:



.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;
}





Как сделать, большой поворачивался с маленьким как индикатор по направлению к курсору?
    

Ответы

Ответ 1

Центр пересчитывается каждый раз чтобы при скролле было актуальное положение. Возможно,
можно что-то немного изменить, чтобы только один раз его просчитать.



document.addEventListener('mousemove', function (event) {
  var div = document.querySelector(".circle");
  var bb = div.getBoundingClientRect();
  var cx = bb.left + bb.width / 2, cy = bb.top + bb.height / 2;
  var angle = Math.atan2(event.y - cy, event.x - cx);
  
  div.style.transform = "rotate(" + angle + "rad)"
})
body {
  margin: 3em;
}

.circle
{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(to right, green, blue);
  position: relative;
  transform-origin: center;
}
.indicator
{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  left: 80px;
  top: 45px;
}



Ответ 2

За основу был взят старый-старый скрипт, но он рабочий, так что вот.



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



  




Ответ 3

$(function(){
    var mouseX = 0, mouseY = 0, limitX = 150-10, limitY = 150-10; 
// Определяет границы, по которым будет двигаться объект
    $(window).mousemove(function(e){
        var offset = $('.move-wrap').offset();
        mouseX = Math.min(e.pageX - offset.left, limitX);
        mouseY = Math.min(e.pageY - offset.top, limitY);
// Ищет координаты курсора
        if (mouseX < 0) mouseX = 0;
// С какого момента (координат) начинать движение за курсором
        if (mouseY < 0) mouseY = 0;
// Если курсор находится вне веб-страницы на момент загрузки, то установит объект
в координатах x=0, y=0.
     
});
 
    var follower = $("#follower");
    var xp = 0, yp = 0; // Начальные координаты объекта на момент загрузки страницы
    var loop = setInterval(function(){
// Далее определяется скорость, с которой будет двигаться объект.
// Изменить значение 20, для изменения скорости. Чем больше это значение, тем медленнее
движется объект.
         
            xp += (mouseX - xp) / 20;
        yp += (mouseY - yp) / 20;
        follower.css({left:xp, top:yp});
// Изменение позиционирования объекта с помощью css
         
    }, 10);
//В данном случае это значение определяет, насколько плавно и быстро будет происходить
движение
});
#follower{
  position : relative;
  background-color : #000;
  width:10px;
  height:10px; /* Размеры движущегося объекта */
  border-radius:50px;
}
.move-wrap {
  width:150px;
  height:150px; /* Размеры области, в которой будет двигаться объект */
  position: relative;
  overflow:hidden;
  border:1px solid #000000;
}