5

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

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

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

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

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

4

4 ответа 4

11

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

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>

2
  • Спасибо!!!!!!!!
    – Ver Nick
    23 сен 2018 в 11:36
  • Сейчас можно проще :)
    – Qwertiy
    23 сен 2018 в 14:56
8

$(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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="move-wrap">
  <div id="follower"></div>
</div>

2
  • 4
    Хороший пример, но между "вращением по направлению к курсору" и "движением по направлению к курсору" есть очень большая разница
    – Alex Krass
    28 янв 2018 в 0:17
  • Можно оживить немного тему? Подскажите пожалуйста как совместить пример, там где, крутится окружность с градиентом за мышкой с последним примером, где плавно двигается шарик за мышкой. Как сделать, чтоб окружность с градиентом плавно вращалась за курсором мышки? 3 июн 2020 в 12:38
5

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

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;
}
<div class="circle"><div class="indicator"></div></div>

3
  • Отлично, так будет быстрее
    – Ver Nick
    23 сен 2018 в 14:58
  • Можно оживить немного тему? Подскажите пожалуйста как совместить пример, там где, крутится окружность с градиентом за мышкой с последним примером, где плавно двигается шарик за мышкой. Как сделать, чтоб окружность с градиентом плавно вращалась за курсором мышки? 3 июн 2020 в 12:38
  • @OdiseuOdiseu, хотел предложить transition, но получается полная жесть. Значит руками через углы.
    – Qwertiy
    3 июн 2020 в 14:54
5

Автор: Stranger in the Q

JSFIDDLE

class rotationOfTheObjectTowardsTheCursor {

	constructor() {
		this.circle = Object;
		this.line = Object;
		
		this.circleRect = Object;
		
		this.centerPosition = { x: 0, y: 0 };
		this.angels = { actual: 0, target: 0 };
		
		this.init();
	}
	
	init() {
		this.circle = document.querySelector('.circle');
		this.line = document.querySelector('.line');
		
		this.onResize();
		window.onresize = (e) => this.onResize(e);
		
		window.onmousemove = (e) => this.onMouseMove(e);
		
		requestAnimationFrame(() => this.loop());
	}
	
	onResize() {
		this.circleRect = this.circle.getBoundingClientRect();
		this.centerPosition = {
			x: this.circleRect.x + this.circleRect.width / 2,
			y: this.circleRect.y + this.circleRect.height / 2,
		};
	}
	
	onMouseMove(e) {
		const atan2 = Math.atan2(
			e.pageY - this.centerPosition.y,
			e.pageX - this.centerPosition.x
		);
		
		this.angels.target = atan2;
	}
	
	loop() {
		this.angels.actual = this.angleLerp(
			this.angels.actual,
			this.angels.target,
			0.1
		);

		this.line.style.transform = `rotate(${this.angels.actual}rad)`;

		requestAnimationFrame(() => this.loop());
	}
	
	angleLerp(a0, a1, t) {
		const max = Math.PI * 2;
		const da = (a1 - a0) % max;
		return a0 + (((2 * da) % max) - da) * t;
	}

}

new rotationOfTheObjectTowardsTheCursor();
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: lightblue;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.line {
	width: 40%;
	height: 1px;
	background-color: red;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: rotate(30deg);
	transform-origin: left;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: darkblue;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-50%);
}
<div class="circle">
	<div class="line">
		<div class="dot"></div>
	</div>
</div>

1
  • Спасибо, с ускорением и замедлением выглядит прекрасно.
    – Ver Nick
    4 июн 2020 в 7:20

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.