Отстает от onmousemove и позиции div

1

Я пытаюсь получить стеклянную лупу в JS.
Но что-то не так, когда я пытаюсь установить положение своего стекла относительно положения курсора: если я попытаюсь установить положение стекла в центр курсора, произойдут задержки, и я не могу понять, почему. Я попытался установить трансляцию: перевод (-50%, -50%) на мой стакан, но результаты те же.

Больше, чем мое положение стекла далеко от центра курсора, меньше прослушивается.

let img = document.querySelector('.longboard');
let glass = document.querySelector('#zoom');
let displayCoor = document.querySelector('.coordonnees');
let a = glass.offsetWidth / 2;
let b = glass.offsetHeight / 2;


img.onmousemove = function(e) {zoomMovement(e)};


function mousemovement(e) {
    let x = e.pageX;
    let y = e.pageY;
    let coor = "Coordinates: (" + x + "," + y + ")";
    displayCoor.innerHTML = coor;
    return {x : x, y : y};
};

function zoomMovement (e){
    var pos = mousemovement(e);
    glass.style.top = (pos.y-b) +'px'; //<-- increase b to avoid the lag
    glass.style.left = (pos.x-a) +'px';//<-- increase a to avoid the lag
}

/*img.addEventListener('mouseenter', function () {
    document.getElementById('zoom').className = "visible";


});
img.addEventListener('mouseleave', function () {
    document.getElementById('zoom').className = "invisible";
});*/
.visible{
    display: block;
    box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.5);
}
.invisible{
    display: none;
}
#zoom{
    position: absolute;
    background-image: url("https://scene7.zumiez.com/is/image/zumiez/Zoom_PDP/Santa-Cruz-Space-Wolf-40%26quot%3B-Drop-Down-Longboard-Complete-_288601-front-US.jpg");
    background-repeat: no-repeat;
    width: 150px;
    height: 150px;
    border-radius: 100px;
    z-index: 2;
}
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Loupe</title>
    <link rel="stylesheet" href="/main.css">
</head>
<body>
    <div class="container">
     <img class="longboard" src="https://scene7.zumiez.com/is/image/zumiez/Zoom_PDP/Santa-Cruz-Space-Wolf-40%26quot%3B-Drop-Down-Longboard-Complete-_288601-front-US.jpg" style="position: relative; display: block;margin: 100px auto; width: 30%;"/>
    </div>
    <div class="coordonnees" style="display: block;margin: 30px auto"></div>
        <div id="zoom" class="visible"> </div>
    <script src="/zoom3.js"></script>
</body>

</html>

Я буду очень признателен, если кто-нибудь сможет объяснить мне, почему.
Спасибо за вашу помощь!

Теги:
position
onmousemove

1 ответ

1
Лучший ответ

Я не уверен, что понимаю, что вы подразумеваете под "лаг". Но одна проблема, которую я обнаружил, это то, что вы только слушаете событие mousemove на своем img. Таким образом, если вы перемещаете курсор внутри вашего зума, стеклянный увлажнитель не перемещается. Это потому, что у вашего glass есть более высокий z-index чем ваш img. Таким образом, событие mousemove не запускается, пока вы не перемещаете курсор из glass.

Чтобы решить эту проблему, я только привязал ваш слушатель событий к glass элементу, и он кажется более плавным.

EDIT: Я нашел гораздо лучшее решение, используя CSS- pointer-events:none из ваших glass элементов.

Затем вы можете раскомментировать свой eventListener, который показывает и скрывает вашу лупу, когда вы покидаете/вводите img

let img = document.querySelector('.longboard');
let glass = document.querySelector('#zoom');
let displayCoor = document.querySelector('.coordonnees');
let a = glass.offsetWidth / 2;
let b = glass.offsetHeight / 2;


img.onmousemove = function(e) {zoomMovement(e)};
// previous solution : listening to mousemove on the magnifier : 
// glass.onmousemove = function(e) {zoomMovement(e)};

function mousemovement(e) {
    let x = e.pageX;
    let y = e.pageY;
    let coor = "Coordinates: (" + x + "," + y + ")";
    displayCoor.innerHTML = coor;
    return {x : x, y : y};
};

function zoomMovement (e){
    var pos = mousemovement(e);
    glass.style.top = (pos.y-b) +'px'; //<-- increase b to avoid the lag
    glass.style.left = (pos.x-a) +'px';//<-- increase a to avoid the lag
}

img.addEventListener('mouseenter', function () {
    document.getElementById('zoom').className = "visible";


});
img.addEventListener('mouseleave', function () {
    document.getElementById('zoom').className = "invisible";
});
.visible{
    display: block;
    box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.5);
}
.invisible{
    display: none;
}
#zoom{
    position: absolute;
    background-image: url("https://scene7.zumiez.com/is/image/zumiez/Zoom_PDP/Santa-Cruz-Space-Wolf-40%26quot%3B-Drop-Down-Longboard-Complete-_288601-front-US.jpg");
    background-repeat: no-repeat;
    width: 150px;
    height: 150px;
    border-radius: 100px;
    z-index: 2;
    pointer-events:none;
}
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Loupe</title>
    <link rel="stylesheet" href="/main.css">
</head>
<body>
    <div class="container">
     <img class="longboard" src="https://scene7.zumiez.com/is/image/zumiez/Zoom_PDP/Santa-Cruz-Space-Wolf-40%26quot%3B-Drop-Down-Longboard-Complete-_288601-front-US.jpg" style="position: relative; display: block;margin: 100px auto; width: 30%;"/>
    </div>
    <div class="coordonnees" style="display: block;margin: 30px auto"></div>
        <div id="zoom" class="visible"> </div>
    <script src="/zoom3.js"></script>
</body>

</html>
Поделиться
  • 0
    Здравствуй! На самом деле, я только слушаю событие mousemove на моем .img, потому что стекло должно появляться только на .img (точно так же, как в этом примере: codepen.io/AGvin/pen/mqKsC, но без каких-либо jquery). Но вы получаете точку : каждый раз, когда стекло появляется под моей мышью, моя мышь больше не находится на моем .img, поэтому кажется, что оно "запаздывает"!
  • 0
    @Avaenity проверить мои изменения. Я нашел гораздо лучшее решение с помощью CSS. Кредит на stackoverflow.com/questions/1657319/…
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню