Категории

• Все категории
• 2040
• CG
• IOT умный дом
• Joomla
• Linux
• Windows
• Безопасность
• железо
• Сети LAN
• Создание сайтов

Лупа на картинку

27.10.2025 20:33 | коды из категории: Создание сайтов

сохранил себе, иногда использую этот эффект на картинке. К примеру при создании интернет-магазина надо реализовать просмотр деталей на картинке товара.

css

<style>
    * {
      box-sizing: border-box;
    }

    .img-magnifier-container {
      position: relative;
      display: inline-block;
    }

    .img-magnifier-glass {
      position: absolute;
      border: 3px solid #000;
      border-radius: 50%;
      cursor: none;
      width: 100px;
      height: 100px;
      pointer-events: none; /* чтобы не мешало событиям мыши на изображении */
    }
  </style>

html

<div class="img-magnifier-container">
  <img id="myimage" src="https://www.w3schools.com/howto/img_snow.jpg" width="600" height="400" alt="Горы">
</div>

java-script

function magnify(imgID, zoom) {
    var img, glass, w, h, bw;
    img = document.getElementById(imgID);

    // Создаем увеличительное стекло
    glass = document.createElement("DIV");
    glass.setAttribute("class", "img-magnifier-glass");

    // Вставляем его перед изображением
    img.parentElement.insertBefore(glass, img);

    // Настраиваем фон лупы
    glass.style.backgroundImage = "url('" + img.src + "')";
    glass.style.backgroundRepeat = "no-repeat";
    glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
    bw = 3;
    w = glass.offsetWidth / 2;
    h = glass.offsetHeight / 2;

    // Обработчик движения мыши и касаний
    glass.addEventListener("mousemove", moveMagnifier);
    img.addEventListener("mousemove", moveMagnifier);
    glass.addEventListener("touchmove", moveMagnifier);
    img.addEventListener("touchmove", moveMagnifier);

    function moveMagnifier(e) {
      var pos, x, y;
      e.preventDefault();
      pos = getCursorPos(e);
      x = pos.x;
      y = pos.y;

      // Ограничение по краям изображения
      if (x > img.width - (w / zoom)) x = img.width - (w / zoom);
      if (x < w / zoom) x = w / zoom;
      if (y > img.height - (h / zoom)) y = img.height - (h / zoom);
      if (y < h / zoom) y = h / zoom;

      // Позиционируем лупу
      glass.style.left = (x - w) + "px";
      glass.style.top = (y - h) + "px";

      // Смещаем фон, чтобы показать увеличенную область
      glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
    }

    function getCursorPos(e) {
      var a, x = 0, y = 0;
      e = e || window.event;
      a = img.getBoundingClientRect();
      x = e.pageX - a.left - window.pageXOffset;
      y = e.pageY - a.top - window.pageYOffset;
      return { x: x, y: y };
    }
  }

  // Запускаем эффект
const img = document.getElementById("myimage");
if (img.complete) {
  // Уже загружено (из кэша)
  magnify("myimage", 3);
} else {
  img.addEventListener('load', function() {
    magnify("myimage", 3);
  });
}

← Назад к списку

---