ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Лупа увеличение изображений на JavaScript

Лупа увеличение изображений на JavaScript

Лупа увеличение изображений на JavaScript
Представлен материал на JavaScript, как создать увеличение изображения с эффектом лупы, где при наведении объекта, часть рисунка увеличивается. На многих тематических ресурсах данный эффект актуален, и играет важную роль на данном веб-сайте. Здесь нужно подметить, что в большинстве разработчики используют jquery для создания увеличение данной части рисунка, а просто, куда вы наведете данный круг, который позиционирует лупу под увеличение элемента картинки.

В этом материале показано, как создать лупу при помощи HTML, CSS и главный ингредиент, это безусловно JavaScript, который будет заменять библиотеку, и полностью функционал заострен на нем. Если рассматривать стилистику, то это качается самого каркаса, что идет, виде круга, где вы курсором наводите на элементы изображение. Если вам необходимо сделать увеличение изображение с помощью увеличительного стекла, то этот дизайн для вас.

При проверки на работоспособность данного скрипта:

Оригинальная лупа для изображений с использованием JavaScript и CSS

Переходим к установке:

Если шрифтовые кнопки не установлены, то прописываем в head на данной страницы или категории, так, где будет задействована увеличение лупы.

Код
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

HTML

Ставим по месту, где хотим видеть данное изображение.

Код
<div class="cistenes">
  <div id="advance">
  <img src="Ссылка на изображение" alt="">
  </div>
  </div>

CSS

Код
.cistenes {
  width: 648px;
  height: 398px;
  background: #f3eded;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgb(241 241 241);
}
#steklo {
  position: absolute;
  border: 2px solid #d3cdcd;
  border-radius: 50%;
  overflow: hidden;
  cursor: none;
  box-shadow: inset 0 0 10px 2px #6a6464;
  filter: drop-shadow(0 0 2px #6a6464);
}

#advance img{
  width: 648px;
  height: 398px;
}

#steklo > * {
  cursor: none;
}

@media (max-height: 600px) {
  #advance img, .cistenes{
  width: 518px;
  height: 318px;
  }
}

JS

Код
const stekloSize = 200;

function magnify(id, zoom){
  const el = document.getElementById(id);
  const copy = el.cloneNode(true);
  const steklo = document.createElement("div");
   
  steklo.setAttribute("id","steklo")  
  steklo.style.width = stekloSize + "px";
  steklo.style.height = stekloSize + "px";
   
  el.appendChild(steklo);
  el.getBoundingClientRect();
  copy.style.zoom = zoom;
  steklo.appendChild(copy);
   
  copy.style.width = (el.offsetWidth * zoom) + "px";
  copy.style.heigth = (el.offsetHeight * zoom) + "px";
  copy.style.position = "absolute";
   
  el.addEventListener("mousemove", (ev) => {
  ev.preventDefault();
  ev.stopPropagation();
  const pos = getCursorPos(ev);
  steklo.style.left = - (stekloSize/2) + pos.x + "px";
  steklo.style.top = - (stekloSize/2) + pos.y + "px";
  copy.style.left = - (pos.x - el.offsetLeft) + (stekloSize/zoom)*0.5 + "px";
  copy.style.top = - (pos.y - el.offsetTop) + (stekloSize/zoom)*0.5 + "px";
  })
}

  function getCursorPos(e) {
  var x = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
  var y = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
  return {x : x , y : y};
  }

magnify("advance", 4)

Используя следующие коды HTML и CSS, на веб-странице сначала было создано окно для этой лупы, где можете увидеть изображение в этом поле.

Но и безусловно выставить ширину данного круга, а также добавить теней, который уже изначально прописаны, но это больше относиться к дизайну, чтоб выглядело более оригинально.

Демонстрация
2022-06-10 Просмотров: 248 Комментарий: (3)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарий: 3
-SAM-
-SAM- 2022-06-10 23:001
0
Смотрел демо, то у меня почему-то такого же эффекта увеличения не наблюдается, как на картинке материала. Просто при наводке линзы картинка-подложка смешается по оси координат (нет никакого увеличения-приближения). Возможно, что оно не кроссбраузерное.

UPD.: тогда ясно, типо там нужно менять переменную, где идёт - magnify("advance", 4) ... const stekloSize = 200; - а это типо размер линзы.
Kosten
Kosten 2022-06-10 23:052
0
-SAM-, нет, просто такое не очень так скажем увеличение, так как демо идет с оригинала.
Kosten
Kosten 2022-06-13 21:333
+1
Такое увеличение можно сделать для гостей, где при скачивание нужно прописать код, который под лупой виден, но только пользователю.

Также на проверку робота, чтоб не картинки выбирать, а посмотреть код активации через увеличение. Выходит есть идеи, которые можно реализовать при сайте.
avatar