Лаги по положению onmousemove и div

Я пытаюсь создать стеклянную лупу в 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="css/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="js/zoom3.js"></script>
</body>

</html>

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


javascript position onmousemove
person Avaenity    schedule 27.04.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

ИЗМЕНИТЬ: я нашел гораздо лучшее решение, используя 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="css/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="js/zoom3.js"></script>
</body>

</html>

person Guillaume Georges    schedule 27.04.2018
comment
Привет! Фактически, я слушаю только событие mousemove на моем .img, потому что стекло должно отображаться только на .img (точно так же, как в этом примере: codepen.io/AGvin/pen/mqKsC, но без какого-либо jquery) Но вы понимаете: каждый раз, когда стекло появляется под моей мышью, моя мышь больше не находится на моем .img, вот почему вроде тормозит! - person Avaenity; 27.04.2018
comment
@Avaenity, проверьте мою правку. Я нашел гораздо лучшее решение, используя CSS. Кредит stackoverflow.com/questions/1657319/ - person Guillaume Georges; 27.04.2018
comment
WOAW! ИДЕАЛЬНО! Знай, что я понимаю, в чем была моя ошибка, и у меня есть решение! Просто отлично! Спасибо всем @RogerC! - person Avaenity; 27.04.2018