Вопрос или проблема
У меня есть область (id=”box”), когда курсор движется по этой области, красный круг будет двигаться вместе с курсором. Всё работает так, как ожидается, но курсор находится за пределами красного круга.
Я пытаюсь сделать так, чтобы курсор оставался в центре круга, но пока неудачно.
Буду признателен за любую помощь!
$("#box").mousemove( function(e) {
$popup = $(this).find(".circle").first();
var eTop = $(this).offset().top;
var eLeft = $(this).offset().left;
var x = e.pageX;
var y = e.pageY;
// console.log("pageX: " + x);
// console.log("pageY: " + y)
$(this).find(".circle").css({top: y - eTop, left: x - eLeft });
});#box {
width:500px;
height:200px;
display:block;
background: green;
position:relative;
}
.circle {
position: absolute;
z-index: 100;
overflow:hidden;
white-space: nowrap;
border: 1px solid red;
width: 100px;
height: 100px;
border-radius: 100%
}
#box .circle {visibility: hidden;}
#box:hover .circle {visibility: visible;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div id="box">
<div class="circle"></div>
</div></div><div class="s-prose js-post-body" itemprop="text">Вы забыли вычесть радиус круга из его координат:
$("#box").mousemove( function(e) {
$popup = $(this).find(".circle").first();
var eTop = $(this).offset().top;
var eLeft = $(this).offset().left;
var x = e.pageX;
var y = e.pageY;
// console.log("pageX: " + x);
// console.log("pageY: " + y)
$(this).find(".circle").css({top: y - eTop - 50, left: x - eLeft - 50});
});#box {
width:500px;
height:200px;
display:block;
background: green;
position:relative;
}
.circle {
position: absolute;
z-index: 100;
overflow:hidden;
white-space: nowrap;
border: 1px solid red;
width: 100px;
height: 100px;
border-radius: 100%
}
#box .circle {visibility: hidden;}
#box:hover .circle {visibility: visible;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div id="box">
<div class="circle"></div>
</div>Я думаю, проще использовать CSS-трансформацию (x,y), и это позволяет избежать излишних повторных вычислений…
const
eBox = document.querySelector('#box')
, eCircle = document.querySelector('.circle')
;
eBox.addEventListener('mousemove', ({pageX,pageY}) =>
{
eCircle.style.setProperty('--movXY', `${pageX -eBox.offsetLeft}px, ${pageY -eBox.offsetTop}px`);
})#box {
width : 500px;
height : 200px;
display : block;
background : lightgreen;
position : relative;
overflow : hidden;
}
.circle {
position : absolute;
top : -50px;
left : -50px;
--movXY : 0px,0px;
transform : translate( var(--movXY) );
z-index : 100;
overflow : hidden;
white-space : nowrap;
border : 1px solid red;
width : 100px;
height : 100px;
border-radius : 100%
}
#box .circle { visibility : hidden; }
#box:hover .circle { visibility : visible; }<div id="box">
<div class="circle"></div>
</div>.
Ответ или решение
Как удержать курсор в центре круга, который следует за ним по изображению
Введение
В процессе создания интерактивного веб-приложения нередко возникает необходимость реализовать синхронизацию положения курсора мыши с определенными элементами интерфейса. В данной статье мы разберем, как при перемещении курсора по области (в нашем случае — элементу с ID "box") удерживать его в центре круглого элемента ("circle"), который перемещается следом за курсором.
Проблема
Исходный код, предоставленный в вопросе, создает красный круг, который перемещается вместе с курсором по зеленому фону. Однако курсор оказывается за пределами круга, что ухудшает пользовательский интерфейс. Для того чтобы произвести правильное позиционирование, необходимо учитывать размер круга.
Решение через JavaScript и CSS
Для корректного центрирования курсора в круге нам понадобятся следующие шаги:
- Корректировка координат: Необходимо вычесть половину ширины и высоты круга из координат курсора, чтобы установить круг так, чтобы курсор оказался в его центре.
- Использование CSS для упрощения кода: Можно использовать CSS-трансформации для более простого управления положением элемента.
Реализация
HTML
Наша HTML-структура остается неизменной:
<div id="box">
<div class="circle"></div>
</div>CSS
Настроим стили для #box и .circle. Учтем, что круг должен изначально находиться в скрытом состоянии и появляться только при наведении курсора:
#box {
width: 500px;
height: 200px;
display: block;
background: green;
position: relative;
}
.circle {
position: absolute;
z-index: 100;
overflow: hidden;
white-space: nowrap;
border: 1px solid red;
width: 100px; /* Ширина круга */
height: 100px; /* Высота круга */
border-radius: 50%; /* Превращаем квадрат в круг */
visibility: hidden; /* Изначально скрыт */
}
#box:hover .circle {
visibility: visible; /* Показываем круг при наведении */
}JavaScript
Напишем код, который будет обрабатывать движение курсора:
document.getElementById('box').addEventListener('mousemove', function(e) {
const circle = document.querySelector('.circle');
const boxTop = this.offsetTop;
const boxLeft = this.offsetLeft;
// Вычисление координат для центрирования круга
const x = e.pageX - boxLeft - 50; // 50 - радиус круга
const y = e.pageY - boxTop - 50; // 50 - радиус круга
circle.style.left = `${x}px`;
circle.style.top = `${y}px`;
});Преимущества предложенного решения
- Точность позиционирования: Мы учитываем размер круга, что позволяет курсору оставаться в его центре, создавая более аккуратный и привлекательный интерфейс.
- Минимизация вычислений: Код становится более компактным и легким для понимания, поскольку мы используем простые математические операции.
Заключение
Реализовав описанное решение, вы сможете создать более продвинутый интерфейс, в котором пользователи будут чувствовать себя комфортно при взаимодействии с визуальными элементами. Убедитесь, что все изменения протестированы на разных браузерах для достижения максимальной совместимости и функциональности.