Чтобы реализовать следование перекрестия за стрелкой мыши в JavaScript, вам потребуется некоторые знания о событиях мыши и манипуляциях с CSS.
Прежде всего, вам понадобится элемент перекрестия. Это может быть просто div-элемент со стилизацией или специальным изображением в форме перекрестия. Давайте назовем этот элемент "crosshair" в нашем примере:
<div id="crosshair"></div>
Теперь давайте добавим стили для перекрестия:
#crosshair {
position: absolute;
width: 20px;
height: 20px;
border: 2px solid black;
}
Теперь, чтобы сделать перекрестие перемещаемым за курсором, нам нужно обработать событие перемещения мыши (mousemove) на элементе страницы и обновить позицию перекрестия соответствующим образом.
var crosshair = document.getElementById('crosshair');
document.addEventListener('mousemove', function(event) {
var x = event.clientX;
var y = event.clientY;
crosshair.style.left = x + 'px';
crosshair.style.top = y + 'px';
});
В этом коде мы добавили слушатель события mousemove на объекте document, таким образом, мы следим за перемещением мыши на всей странице. В обработчике события мы получаем текущие координаты курсора (event.clientX и event.clientY) и обновляем позицию перекрестия, устанавливая соответствующие значения свойствам left и top элемента перекрестия.
Теперь, когда у нас есть перемещающееся перекрестие, мы также можем реализовать обработку события щелчка левой кнопкой мыши (mousedown), чтобы зафиксировать позицию перекрестия и выполнить какое-либо действие. В примере ниже я просто выводлю координаты перекрестия в консоль:
document.addEventListener('mousedown', function(event) {
var x = crosshair.style.left;
var y = crosshair.style.top;
console.log('Crosshair position: ' + x + ', ' + y);
});
Таким образом, при щелчке левой кнопкой мыши выводятся координаты текущего положения перекрестия в консоль.
Однако следует отметить, что реализация перекрестия может варьироваться в зависимости от конкретных требований и дизайна вашего проекта. Например, вы можете использовать разные стили, размеры или даже добавить анимацию при перемещении перекрестия.
Надеюсь, эта информация поможет вам создать работающий пример перекрестия, следующего за курсором в JavaScript.