Цифровая лупа на JavaScript
Часто на сайтах интернет-магазинов используют такую технику, которая позволяет увеличивать изображения при наведении на него курсора мыши. При этом достигается эффект цифровой лупы, когда товар можно посмотреть, так сказать, со всех сторон.
Далее я покажу пример реализации такого рода технологии. Сначала напишем 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.
-
Создано 05.03.2019 12:34:46
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.