Как создать лупу изображения с помощью Vanilla JavaScript
Добавьте эту удобную функцию к своим изображениям, и ваши посетители оценят удобство использования и внимание к деталям, которые вы предоставили.
Если вы когда-либо просматривали веб-сайты покупок, вы, вероятно, сталкивались с функцией увеличения изображения. Это позволяет увеличить определенную часть изображения для более детального просмотра. Включение этой небольшой, но эффективной функции может значительно улучшить взаимодействие с пользователем на вашем веб-сайте.
Создание цельной и целостной лупы может оказаться непростой задачей. Но выполнение этих шагов поможет вам создать собственную лупу с нуля без необходимости использовать сторонние плагины.
Когда использовать лупу в вашем веб-проекте
Увеличитель изображения может пригодиться, когда вы создаете проект с большим количеством изображений. Как упоминалось ранее, увеличители изображений очень популярны на торговых сайтах, поскольку иногда пользователю может потребоваться более внимательно рассмотреть продукт, прежде чем решить, стоит ли его покупать.
Клиенты полагаются исключительно на информацию и визуальные эффекты, представленные на веб-сайте, чтобы оценить качество, характеристики и внешний вид продукта. Однако сами по себе статические изображения не всегда могут обеспечить достаточную ясность или дать полную оценку предмета.
В традиционных магазинах покупатели могут физически обращаться с товарами, внимательно их рассматривать и оценивать их пригодность перед покупкой. Увеличители изображения пытаются воссоздать этот опыт, предлагая пользователям аналогичный уровень виртуального изучения.
Увеличители изображений также могут пригодиться, если вы создаете приложение для фотогалереи, поскольку масштабирование определенной части изображения является важной функцией.
Создание лупы изображения
Код, используемый в этом проекте, доступен в репозитории GitHub и может использоваться бесплатно по лицензии MIT.
Создайте папку и добавьте в нее файл index.html, файл style.css и файл main.js. Добавьте этот шаблонный код в index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Magnifier</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
Внутри тега body создайте элемент div с именем класса «header». Затем в элементе div «header» добавьте элемент заголовка h1 , чтобы отобразить заголовок увеличителя изображения.
Вы можете настроить текст в соответствии с вашими потребностями. Затем добавьте два элемента диапазона, которые предоставляют инструкции по использованию лупы и отображают пользователю текущий уровень масштабирования.
После раздела заголовка создайте элемент div с именем класса «контейнер». Внутри этого div добавьте еще один элемент div с именем класса «лупа» и примените «скрытый» класс, чтобы скрыть его от просмотра.
Этот элемент будет представлять изображение лупы. Затем добавьте тег сценария с атрибутом «src», установленным в «/main.js».
<body>
<div class="header">
<h1>Image Magnifier</h1>
<span>Press <strong>Arrow Up</strong> or <strong>Arrow Down</strong> to
increase or decrease athe zoom level.</span>
<span>Zoom Level: <strong class="zoom-level">1</strong></span>
</div>
<div class="container">
<div class="magnifier hidden"></div>
</div>
<script src="/main.js"></script>
</body>
Замените код в файле style.css следующим. Вы также можете использовать препроцессор CSS, например Less, если хотите:
:root {
--magnifier-width: 150;
--magnifier-height: 150;
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
.container {
width: 400px;
height: 300px;
background-size: cover;
background-image: url("https://cdn.pixabay.com/photo/2019/03/27/15/24/animal-4085255_1280.jpg");
background-repeat: no-repeat;
position: relative;
cursor: none;
}
.magnifier {
border-radius: 400px;
box-shadow: 0px 11px 8px 0px #0000008a;
position: absolute;
width: calc(var(--magnifier-width) * 1px);
height: calc(var(--magnifier-height) * 1px);
cursor: none;
background-image: url("https://cdn.pixabay.com/photo/2019/03/27/15/24/animal-4085255_1280.jpg");
background-repeat: no-repeat;
}
span {
display: block;
}
.header {
display: flex;
flex-direction: column;
align-items: center;
}
.hidden {
visibility: hidden;
}
div > span:nth-child(3) {
font-size: 20px;
}
В файле main.js извлеките элементы HTML с именами классов, «лупой» и «контейнером» с помощью метода document.querySelector и присвойте их переменным . >лупа и контейнер соответственно.
Затем с помощью функции getComputedStyle извлеките ширину и высоту элемента лупы, а затем извлеките числовые значения из возвращенных строк с помощью >substring и indexOf .
Назначьте извлеченную ширину переменной MagnifierWidth, а извлеченную высоту – MagnifierHeight.
let magnifier = document.querySelector(".magnifier");
let container = document.querySelector(".container");
let magnifierWidth = getComputedStyle(magnifier).width.substring(
0,
getComputedStyle(magnifier).width.indexOf("p")
);
let magnifierHeight = getComputedStyle(magnifier).width.substring(
0,
getComputedStyle(magnifier).height.indexOf("p")
);Затем настройте переменные для уровня масштабирования, максимального уровня масштабирования, а также положения курсора и изображения лупы.
let zoomLevelLabel = document.querySelector(".zoom-level");
let zoom = 2;
let maxZoomLevel = 5;
let pointerX;
let pointerY;
let magnifyX;
let magnifyY;
В приведенном выше блоке кода pointerX и pointerY обозначают положение курсора по осям X и Y.
Теперь определите две вспомогательные функции: getZoomLevel, которая возвращает текущий уровень масштабирования, и getPointerPosition, которая возвращает объект с x и y. координаты курсора.
function getZoomLevel() {
return zoom;
}
function getPointerPosition() {
return { x: pointerX, y: pointerY }
}
Затем создайте функцию updateMagImage, которая создает новый объект MouseEvent с текущей позицией курсора и отправляет его элементу контейнера. Эта функция отвечает за обновление изображения лупы.
function updateMagImage() {
let evt = new MouseEvent("mousemove", {
clientX: getPointerPosition().x,
clientY: getPointerPosition().y,
bubbles: true,
cancelable: true,
view: window,
});
container.dispatchEvent(evt);
}
Теперь вам следует добавить прослушиватель событий в объект окна для события «keyup», который регулирует уровень масштабирования, когда пользователь нажимает клавиши «Стрелка вверх» или «Стрелка вниз».
Функция обратного вызова события «keyup» также отвечает за обновление метки уровня масштабирования и запуск функции updateMagImage.
window.addEventListener("keyup", (e) => {
if (e.key === "ArrowUp" && maxZoomLevel - Number(zoomLevelLabel.textContent) !== 0) {
zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
zoom = zoom + 0.3;
updateMagImage();
}
if (e.key === "ArrowDown" && !(zoomLevelLabel.textContent <= 1)) {
zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
zoom = zoom - 0.3;
updateMagImage();
}
});
Затем добавьте прослушиватель событий в элемент контейнера для события mousemove.
В функцию обратного вызова добавьте функционал, который удаляет «скрытый» класс из элемента лупы, чтобы сделать его видимым, и рассчитывает положение мыши относительно контейнера с учетом прокрутки страницы.
Эта функция также должна установить стиль преобразования лупы в рассчитанное положение и определить размер фона и положение изображения лупы на основе уровня масштабирования и положения мыши.
container.addEventListener("mousemove", (e) => {
magnifier.classList.remove("hidden");
let rect = container.getBoundingClientRect();
let x = e.pageX - rect.left;
let y = e.pageY - rect.top;
x = x - window.scrollX;
y = y - window.scrollY;
magnifier.style.transform = `translate(${x}px, ${y}px)`;
const imgWidth = 400;
const imgHeight = 300;
magnifier.style.backgroundSize =
imgWidth * getZoomLevel() + "px " + imgHeight * getZoomLevel() + "px";
magnifyX = x * getZoomLevel() + 15;
magnifyY = y * getZoomLevel() + 15;
magnifier.style.backgroundPosition = -magnifyX + "px " + -magnifyY + "px";
});
Затем добавьте еще один прослушиватель событий в элемент контейнера, но на этот раз прослушиватель событий должен прослушивать событие «mouseout» и добавлять «скрытый» класс обратно в элемент лупы всякий раз, когда мышь выходит за пределы области контейнера.
container.addEventListener("mouseout", () => {
magnifier.classList.add("hidden");
});
Наконец, добавьте прослушиватель событий к объекту окна для события «mousemove», которое обновляет позиции курсора по осям X и Y.
window.addEventListener("mousemove", (e) => {
pointerX = e.clientX;
pointerY = e.clientY;
});Вот и все! Вам удалось создать увеличитель изображения с помощью стандартного JavaScript.
Как лупы улучшают взаимодействие с пользователем
Позволяя пользователям увеличивать отдельные области изображения, лупа позволяет им рассмотреть детали продукта с большей четкостью.
Этот расширенный уровень визуального исследования вселяет уверенность в пользователей, поскольку они могут принимать обоснованные решения. Это может способствовать увеличению коэффициента конверсии и улучшению удержания клиентов.