Отстает от onmousemove и позиции div - PullRequest
Новая
       18

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

0 голосов
/ 27 апреля 2018

Я пытаюсь добиться стеклянного увеличителя в 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>

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

1 Ответ

0 голосов
/ 27 апреля 2018

Я не уверен, что понимаю, что вы подразумеваете под "отставанием". Но одна проблема, которую я обнаружил, заключается в том, что вы слушаете только событие 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>
...