Как ускорить передвижение лупы?

Question

[ponko11]

Здравствуйте. Использую на сайте чужой скрипт лупы.

let zoom = document.querySelectorAll('.image-zoom');

zoom.forEach(function(el) {
  el.addEventListener('click', function(e) {
    const target = e.target.closest('.image-zoom'),
          rect = target.getBoundingClientRect();
    target.classList.toggle('-active');
    target.style.setProperty('--image', `url(${target.querySelector('img').getAttribute('src')})`);
    target.style.setProperty('--x', Math.floor(((e.clientX - rect.left) / rect.width * 100) * 100) / 100+'%');
    target.style.setProperty('--y', Math.floor(((e.clientY - rect.top) / rect.height * 100) * 100) / 100+'%');
    target.classList.toggle('-enter');
  });

  el.addEventListener('mouseenter', function(e) {
    const target = e.target.closest('.image-zoom');
    if(target.classList.contains('-active')) {
      target.classList.add('-enter');
    }
  });

  el.addEventListener('mousemove', function(e) {
    const target = e.target.closest('.image-zoom');
    if(target.classList.contains('-active')) {
      const rect = target.getBoundingClientRect();
      target.style.setProperty('--x', Math.floor(((e.clientX - rect.left) / rect.width * 100) * 100) / 100+'%');
      target.style.setProperty('--y', Math.floor(((e.clientY - rect.top) / rect.height * 100) * 100) / 100+'%');
    }
  });

  el.addEventListener('mouseleave', function(e) {
    let target = e.target.closest('.image-zoom');
    if(target.classList.contains('-active')) {
      target.classList.remove('-enter');
    }
  });
});

body {display: flex; align-items: flex-start;}
.image-zoom:nth-child(1) {width: 75%}

.image-zoom {
  display: inline-block;
  max-width: 100%;
  max-height: 100%;
  height: max-content;
  position: relative;
  cursor: zoom-in;
}

.image-zoom img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  margin: 0;
  position: relative;
  z-index: 1;
}

.image-zoom-block {
  display: none;
  width: 50%;
  height: 50%;
  background-image: var(--image);
  background-repeat: no-repeat;
  background-size: 600%;
  background-position: var(--x) var(--y);
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: 
    translateX(calc(var(--x) * -1))
    translateY(calc(var(--y) * -1));
  z-index: 2;
  pointer-events: none;
}

.image-zoom.-active {
  cursor: zoom-out;
}

.image-zoom.-enter .image-zoom-block {
  display: block;
}

<div class="image-zoom">
  <img src="//i.imgur.com/qnwhFrQ.png" width="771" height="480" alt="">
  <div class="image-zoom-block"></div>
</div>

<div class="image-zoom">
  <img src="//i.imgur.com/Ffa64Ma.gif" width="200" height="385" alt="">
  <div class="image-zoom-block"></div>
</div>

Работает всё правильно, но что то с ним не так. По-моему это из за того, что курсор смещается внутри квадрата(нужно чтобы он оставался в центре). Помогите пожалуйста поправить.

Comments

[Vlad]

вот где карту открывали, туда и идите

Ⓒ Сбербанк

[ponko11]

Vlad, ахахахахах

Answer 1

[Ivan Bogachev]

курсор смещается внутри квадрата(нужно чтобы он оставался в центре)

Если я правильно понял вопрос, то в JS:

// Там, где в двух местах есть работа с --x и --y
target.style.setProperty('--x', Math.floor(((e.clientX - rect.left) / rect.width * 100) * 100) / 100+'%');
target.style.setProperty('--y', Math.floor(((e.clientY - rect.top) / rect.height * 100) * 100) / 100+'%');
// нужна еще пара значений
target.style.setProperty('--new-x', e.clientX - rect.left + 'px');
target.style.setProperty('--new-y', e.clientY - rect.top + 'px');

и в CSS:

.image-zoom-block {
    /*
        left: var(--x);
        top: var(--y);
        transform: translateX(calc(var(--x) * -1)) translateY(calc(var(--y) * -1));
    */
    
    left: var(--new-x);
    top: var(--new-y);
    transform: translateX(-50%) translateY(-50%);
}

Comments

[Vlad]

красивое решение, только блок с картинкой тогда не стоит размещать на краю экрана
https://jsfiddle.net/x1Luncre/2/