Скрипт JavaScript масштабирование объекта, к курсору

Question

У меня есть скрип который масштабирует объект на сайте. Но он масштабирует его к центру сайта. Нужно сделать так, чтобы масштабировалось к тому месту, где находится курсор.

Вот мой скрипт

 <div id="kotik"><img src="kotik_d_850.jpg" width="1000px" height="563px"> </div>
    <script>
        function addOnWheel(elem, handler) {
            if (elem.addEventListener) {
                if ('onwheel' in document) {
                    // IE9+, FF17+
                    elem.addEventListener("wheel", handler);
                } else if ('onmousewheel' in document) {
                    // устаревший вариант события
                    elem.addEventListener("mousewheel", handler);
                } else {
                    // 3.5 <= Firefox < 17, более старое событие DOMMouseScroll пропустим
                    elem.addEventListener("MozMousePixelScroll", handler);
                }
            } else { // IE8-
                kotik.attachEvent("onmousewheel", handler);
            }
        }

        var scale = 1;

        addOnWheel(spbmaps, function(e) {

            var delta = e.deltaY || e.detail || e.wheelDelta;

            // отмасштабируем при помощи CSS
            if (delta > 0) {
                scale = Math.min(scale + 0.05, 3);
            } else {
                scale = Math.max(scale - 0.05, 0.5);
            }

            kotik.style.transform = kotik.style.WebkitTransform = kotik.style.MsTransform = 'scale(' + scale + ')';

            // отменим прокрутку
            e.preventDefault();
        });

    </script>

Answer 1

img.onmousedown = e => {
  e.preventDefault()
  const x = 100 / innerWidth * e.x
  const y = 100 / innerHeight * e.y
  img.style.transformOrigin = `${x}% ${y}%`
  img.style.transform = 'scale(2)'
}

img.onmouseup = e =>
  img.style.transform = 'scale(1)'

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

<img id=img src=https://picsum.photos/1000>

let wait = false,
  s = 1, fs = 1,
  ftx = 0, fty = 0,
  tx = 0, ty = 0

onwheel = e => {
  if (wait) return
  wait = true
  setTimeout(() => wait = false, 100)
  e.preventDefault()

  // направление движения колёсика
  const dir = e.deltaY > 0 ? -1 : 1
  // скорость увеличения/уменьшения
  const v = dir > 0 ? 0.3 : 0.5
  // скорость + направление 
  const step = v * dir

  const hw = innerWidth * 0.5
  const hh = innerHeight * 0.5

  // расстояние на которое нужно подвинуть изображение
  if (dir > 0) {
    ftx = hw - (e.x - ftx)
    fty = hh - (e.y - fty)
  } else {
    ftx = hw - (e.x - ftx * 0.2)
    fty = hh - (e.y - fty * 0.2)
  }

  // не даём выйти за границы
  fs = Math.max(0.4, Math.min(fs + step, 4))
}

function loop() {
  // https://youtu.be/zLh0K1PdUbc?t=439
  tx += (ftx - tx) * 0.04
  ty += (fty - ty) * 0.04
  s += (fs - s) * 0.05

  img.style.setProperty('--s', s)
  img.style.setProperty('--tx', tx + 'px')
  img.style.setProperty('--ty', ty + 'px')

  requestAnimationFrame(loop)
}

loop()

body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(var(--tx), var(--ty)) scale(var(--s));
}

<img id=img src=https://picsum.photos/2000>

БЛОГ НА HUSL

Скрипт JavaScript масштабирование объекта, к курсору

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