@ApachEsH

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

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

codepen
63407abaef18f109059915.jpeg
  • Вопрос задан
  • 208 просмотров
Решения вопроса 2
Get-Web
@Get-Web Куратор тега CSS
Front-End Developer
Как-то так:
Ответ написан
Комментировать
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Из описания вопроса не совсем понятно, какую именно логику следования стрелки за мышкой вы хотите получить (можно придумать разные варианты), но скорее всего вам нужно отталкиваться от логики вроде такой:
// Тут, конечно, лучше какие-нибудь 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;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы