Как сделать вращение стрелки за мышкой?

Question

[ApachEsH]

Подскажите как средствами JS (можно jQuery) заставить желтую стрелку двигаться за мышкой в пределах верхней половины круга. Если ориентироваться на transform: rotate это получается от 90 до 270 градусов

codepen

Answer 1

[Виталий Першин]

Как-то так:

Answer 2

[Ivan Bogachev]

Из описания вопроса не совсем понятно, какую именно логику следования стрелки за мышкой вы хотите получить (можно придумать разные варианты), но скорее всего вам нужно отталкиваться от логики вроде такой:

// Тут, конечно, лучше какие-нибудь id сделать для однозначности
const circle = document.querySelector('.circle');
const arrow = document.querySelector('.arrow');

document.addEventListener('mousemove', (e) => {    
    const circleRect = circle.getBoundingClientRect();
    const circleCenterX = circleRect.left + circle.offsetWidth / 2;
    const circleCenterY = circleRect.top + circle.offsetHeight / 2;
    const deltaX = e.clientX - circleCenterX;
    const deltaY = e.clientY - circleCenterY;
    const angleInRadians = Math.atan2(deltaY, deltaX) - Math.PI / 2;
    const angleInDegrees = 180 * angleInRadians / Math.PI;
    const angleFrom0To360 = (angleInDegrees + 360) % 360;
    const shouldEffectBeApplied = deltaY < 0;
    
    if (shouldEffectBeApplied) {
        arrow.style.transform = `rotate(${angleFrom0To360}deg)`;
    }
});

И еще в таких штуках всегда хорошо добавить какой-нибудь transition в CSS:

.arrow {
    transition: transform .1s linear;
}

Comments

[ApachEsH]

Да, это именно та логика которая мне нужна. Спасибо, буду разбираться как оно работает :)