В этой статье вы узнаете, как создать масштабирование изображения при наведении с помощью 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.