как реализовать лупу на js, но так чтобы граница лупы не выходила за границы изображения?

Question

Нашёл в интернете пару вариантов, но ни один не могу настроить нормально. Нужно что то наподобие этого: https://github.com/sularome/Zoomple. Чтобы лупа в форме квадрата скользила по изображению, но не выходила за его границы и увеличенное изображение отображалось именно внутри лупы, без дополнительного блока. И желательно чтобы лупа включалась и выключалась при нажатии на картинку. Чтобы работала как здесь: https://brandshop.ru/goods/357132/s2044-636/. Спасибо

Answer 1

Работает с разными изображениями.

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>

БЛОГ НА HUSL

как реализовать лупу на js, но так чтобы граница лупы не выходила за границы изображения?

Ответы (1 шт):