Увеличение изображения при наведении с помощью Javascript (код + демонстрация)

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

В данном примере используется JavaScript для увеличения изображения при наведении. Поскольку здесь используется JavaScript, он является очень продвинутым. В этом проекте вы можете увеличить каждую точку изображения.

✅✅ Live Preview ? JavaScript Image Zoom

По сути, он будет следовать за курсором мыши. В результате, та часть изображения, куда вы перемещаете мышь, будет увеличена. Но просто увеличить изображение с помощью css невозможно.

Javascript Увеличение изображения при наведении

Сначала я создал коробку. Затем я добавил изображение в эту коробку. Была использована граница бокса height: 300px, width: 500px и 5px. Изображение было сделано равным размеру коробки.

Для его создания необходимо выполнить 3 шага. Ниже я привел весь код. Тем не менее, я поделился пояснениями к каждой из использованных строк кода.

Код HTML

Следующий код — это html, с помощью которого создается поле и добавляется изображение.

Здесь дважды использовано одно и то же изображение.

  • Сначала изображение было добавлено с помощью 'background-image' в ‘figure’.

  • Затем изображение было добавлено в тег img.

  • Здесь используется onmousemove = "zoom (event)". В результате, если вы наведете курсор мыши на изображение, оно увеличится.

  • Здесь только изображение в 'figure' будет увеличено. Изображения, добавленные с помощью тегов Imgre, не изменятся.

Ниже приведены два изображения, которые были использованы, и то, что они делают.

<figure class="zoom" onmousemove="zoom(event)" style="background-image: url(https://images5.alphacoders.com/343/thumb-1920-343645.jpg)">

  <img src="https://images5.alphacoders.com/343/thumb-1920-343645.jpg" />

</figure>
Вход в полноэкранный режим Выход из полноэкранного режима

Код CSS

Теперь пришло время разработать Zoom Image on hover с помощью css.

  • Сначала был выполнен базовый дизайн «фигуры». Вставка высота: 300px, ширина: 500px.
  • Затем я добавил эффект наведения на нормандское изображение (img: hover). Здесь opacity: 0 используется с помощью hover. В результате, если вы переместите мышь внутрь поля, изображение, добавленное тегом img, не будет видно.
  • Поскольку изображение, использующее тег img, не видно, можно увидеть изображение в «рисунке» на задней стороне.
figure.zoom {
  background-position: 50% 50%;
  position: relative;
  margin: 150px auto;
  border: 5px solid white;
  box-shadow: -1px 5px 15px black;
  height: 300px;
  width: 500px;
  overflow: hidden;
  cursor: zoom-in;
}

figure.zoom img:hover {
  opacity: 0;
}

figure.zoom img {
  transition: opacity 0.5s;
  display: block;
  width: 100%;
  height: 100%;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Код JavaScript

Почти вся работа по оформлению сделана. Теперь настало время активировать этот Zoom Image с помощью JavaScript. JavaScript в основном помогает следить за курсором мыши.

function zoom(e){
  var zoomer = e.currentTarget;
  e.offsetX ? offsetX = e.offsetX : offsetX = e.touches[0].pageX
  e.offsetY ? offsetY = e.offsetY : offsetX = e.touches[0].pageX
  x = offsetX/zoomer.offsetWidth*100
  y = offsetY/zoomer.offsetHeight*100
  zoomer.style.backgroundPosition = x + '% ' + y + '%';
}
Вход в полноэкранный режим Выход из полноэкранного режима

Пожалуйста, прокомментируйте, как вам понравилось это увеличение изображения при наведении. Если есть какие-либо проблемы, пожалуйста, прокомментируйте. Я создал множество эффектов увеличения изображения с помощью css.

Надеюсь, вы узнали из этой статьи, как увеличить изображение при наведении с помощью JavaScript.

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *