Часто на сайтах интернет-магазинов используют такую технику, которая позволяет увеличивать изображения при наведении на него курсора мыши. При этом достигается эффект цифровой лупы, когда товар можно посмотреть, так сказать, со всех сторон.
Часто на сайтах интернет-магазинов используют такую технику, которая позволяет увеличивать изображения при наведении на него курсора мыши. При этом достигается эффект цифровой лупы, когда товар можно посмотреть, так сказать, со всех сторон.
Далее я покажу пример реализации такого рода технологии. Сначала напишем HTML разметку:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Цифровая лупа на чистом JS</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="zoomer" onmousemove="zoom(event)"
style="background-image: url(zoom-image-2.jpg);" >
<img src="zoom-image-2.jpg" />
</div>
<div class="zoomer" onmousemove="zoom(event)"
style="background-image: url(zoom-image.jpg);" >
<img src="zoom-image.jpg" />
</div>
</body>
</html>
Далее необходимо в файл style.css добавить следующий код:
.zoomer {
background-position: 50% 50%;
position: relative;
width: 500px;
overflow: hidden;
cursor: zoom-in;
}
.zoomer img:hover {
/*
* скрываем начальное изображение
* при наведении курсора на блок
*/
opacity: 0;
}
.zoomer img {
transition: opacity .5s;
display: block;
width: 100%;
}
И вот собственно сам JavaScript код для создания цифровой лупы:
function zoom(event) {
let zoomer = event.currentTarget;
event.offsetX ? (offsetX = event.offsetX) : (offsetX = event.touches[0].pageX);
event.offsetY ? (offsetY = event.offsetY) : (offsetX = event.touches[0].pageX);
let x = offsetX / zoomer.offsetWidth * 100;
let y = offsetY / zoomer.offsetHeight * 100;
zoomer.style.backgroundPosition = x + "% " + y +"%";
}
Вот так можно реализовать увеличение изображения, как при просмотре лупой, на чистом JavaScript.
