Добавьте эту удобную функцию к своим изображениям, и ваши посетители оценят удобство использования и внимание к деталям.

Если вы когда-либо просматривали веб-сайты магазинов, вы, вероятно, сталкивались с функцией увеличения изображения. Это позволяет вам увеличивать определенную часть изображения для более близкого просмотра. Включение этой небольшой, но эффективной функции может значительно улучшить взаимодействие с пользователем на вашем собственном веб-сайте.

Построение лупы бесшовным и связным образом может быть сложной задачей. Но выполнение этих шагов поможет вам создать собственную лупу с нуля, без необходимости полагаться на сторонние плагины.

Когда использовать лупу изображения в вашем веб-проекте

Увеличитель изображения может пригодиться, когда вы создаете проект с большим количеством изображений. Как упоминалось ранее, лупы для изображений очень популярны на веб-сайтах, посвященных покупкам, потому что иногда пользователю может потребоваться более внимательно изучить продукт, прежде чем решить, стоит ли его покупать.

instagram viewer

Клиенты полагаются исключительно на информацию и изображения, предоставляемые веб-сайтом, для оценки качества, функций и внешнего вида продукта. Однако сами по себе статические изображения не всегда могут обеспечить достаточную ясность или позволить всесторонне оценить предмет.

В традиционных магазинах покупатели могут физически прикасаться к товарам, внимательно их рассматривать и оценивать их пригодность перед покупкой. Увеличители изображений пытаются воссоздать этот опыт, предлагая пользователям аналогичный уровень тщательного изучения и виртуального изучения.

Увеличители изображений также могут пригодиться, если вы создание приложения для создания фотогалереи поскольку масштабирование определенной части изображения является важной функцией.

Создание увеличителя изображения

Код, используемый в этом проекте, доступен в Репозиторий GitHub и вы можете использовать его бесплатно по лицензии MIT.

Создайте папку и в этой папке добавьте index.html файл, стиль.css файл и main.js файл. Добавьте этот шаблонный код в index.html:

HTML>
<HTMLязык="ан">
<голова>
<метакодировка="УТФ-8" />
<метаимя="окно просмотра"содержание="ширина = ширина устройства, начальный масштаб = 1,0" />
<заголовок>Лупа изображениязаголовок>
<связьотн.="таблица стилей"href="стиль.css" />
голова>


<тело>
тело>
HTML>

Внутри тело тег, создайте элемент div с именем класса «заголовок». Затем в div "header" добавьте h1 элемент заголовка для отображения названия лупы вашего изображения.

Вы можете настроить текст в соответствии с вашими потребностями. Затем включите два элемента span, которые предоставляют инструкции по использованию лупы и отображают текущий уровень масштабирования для пользователя.

После раздела заголовка создайте див элемент с именем класса "контейнер". Внутри этого div добавьте еще один элемент div с именем класса «лупа» и примените «скрытый» класс, чтобы скрыть его от просмотра.

Этот элемент будет представлять изображение лупы. Затем добавьте тег скрипта с атрибутом «src», установленным в «/main.js».

<тело>
<дивсорт="заголовок">
<h1>Лупа изображенияh1>
<охватывать>Нажимать <сильный>Стрелка вверхсильный> или <сильный>Стрелка внизсильный> к
 увеличить или уменьшить уровень масштабирования.охватывать>


<охватывать>Уровень масштабирования: <сильныйсорт="уровень масштабирования">1сильный>охватывать>
див>


<дивсорт="контейнер">
<дивсорт="лупа скрыта">див>
див>
<сценарийисточник="/main.js">сценарий>
тело>

Замените код в стиль.css файл со следующим. Вы также можете использовать Препроцессор CSS, такой как Less если ты хочешь:

:корень {
--увеличитель-ширина: 150;
--увеличитель-высота: 150;
}
тело {
отображать: сгибаться;
flex-направление: столбец;
выравнивание элементов: центр;
}


.контейнер {
ширина: 400пикс.;
высота: 300пикс.;
размер фона: крышка;
изображение на заднем плане: URL("https://cdn.pixabay.com/Фото/2019/03/27/15/24/животное-4085255_1280.jpg");
фоновый повтор: неповторяющийся;
позиция: родственник;
курсор: никто;
}


.лупа {
радиус границы: 400пикс.;
коробка-тень: 0пикс. 11пикс. 8пикс. 0пикс.#0000008a;
позиция: абсолютный;
ширина: вычислять(вар(--увеличитель-ширина) * 1пикс.);
высота: вычислять(вар(--увеличитель-высота) * 1пикс.);
курсор: никто;
изображение на заднем плане: URL("https://cdn.pixabay.com/Фото/2019/03/27/15/24/животное-4085255_1280.jpg");
фоновый повтор: неповторяющийся;
}


охватывать {
отображать: блокировать;
}


.заголовок {
отображать: сгибаться;
flex-направление: столбец;
выравнивание элементов: центр;
}


.скрытый {
видимость: скрытый;
}
див > охватывать:nth-ребенок (3) {
размер шрифта: 20пикс.;
}

в main.js файл, извлеките элементы HTML с именами классов, «лупой» и «контейнером», используя документ.querySelector метод и присвоить их переменным лупа и контейнер, соответственно.

Затем с помощью getComputedStyle функция извлечения ширина и высота элемента лупы, а затем извлеките числовые значения из возвращенных строк, используя подстрока и индекс методы.

Назначьте извлеченную ширину переменной лупаШирина, а извлеченная высота к лупаВысота.

позволять лупа = документ.querySelector(".лупа");
позволять контейнер = документ.querySelector(".контейнер");
позволять magnifierWidth = getComputedStyle (лупа).width.substring(
0,
 getComputedStyle (лупа).width.indexOf("п")
);
позволять magnifierHeight = getComputedStyle (лупа).width.substring(
0,
 getComputedStyle (лупа).height.indexOf("п")
);

Затем настройте переменные для уровня масштабирования, максимального уровня масштабирования и положения курсора и изображения лупы.

позволять zoomLevelLabel = документ.querySelector(".уровень масштабирования");
позволять зум = 2;
позволять максзумлевел = 5;
позволять указательX;
позволять указательY;
позволять увеличитьX;
позволять увеличитьY;

В приведенном выше блоке кода указательX и указательY оба представляют положение курсора по осям X и Y.

Теперь определите две вспомогательные функции: получитьZoomLevel который возвращает текущий уровень масштабирования и getPointerPosition который возвращает объект с Икс и у координаты курсора.

функцияполучитьZoomLevel() {
возвращаться зум;
}
функцияgetPointerPosition() {
возвращаться { Икс: указательX, у: указатель Y }
}

Далее создайте добавить обновитьMagImage функция, которая создает новый объект MouseEvent с текущей позицией курсора и отправляет его элементу-контейнеру. Эта функция отвечает за обновление изображения лупы.

функцияобновитьMagImage() {
позволять эвт = новый Событие мыши("мышь", {
 клиентX: getPointerPosition().x,
 clientY: getPointerPosition().y,
 пузыри: истинный,
 отменяемый: истинный,
 вид: окно,
 });
 container.dispatchEvent(evt);
}

Теперь вы должны добавить прослушиватель событий к объекту окна для события «keyup», которое регулирует уровень масштабирования, когда пользователь нажимает клавиши «Стрелка вверх» или «Стрелка вниз».

Функция обратного вызова для события «keyup» также отвечает за обновление метки уровня масштабирования и запуск функции обновитьMagImage функция.

окно.addEventListener("ключ", (д) ​​=> {
если (электронный ключ "Стрела вверх" && maxZoomLevel - Число(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 зум = зум + 0.3;
 обновитьMagImage();
 }
если (электронный ключ "Стрелка вниз" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 зум = зум - 0.3;
 обновитьMagImage();
 }
});

Затем добавьте прослушиватель событий в элемент контейнера для события «mousemove».

​​​​​​

В функции обратного вызова добавьте функциональность, которая удаляет «скрытый» класс из элемента лупы в сделать его видимым и вычислить положение мыши относительно контейнера, принимая прокрутку страницы в счет.

Эта функция также должна установить стиль преобразования лупы в рассчитанное положение и определить размер фона и положение изображения лупы на основе уровня масштабирования и мыши позиция.

container.addEventListener("мышь", (д) ​​=> {
 лупа.классСписок.удалить("скрытый");
позволять прямоугольник = container.getBoundingClientRect();
позволять x = e.pageX - rect.left;
позволять y = e.pageY - rect.top;
 х = х - окно.прокруткаX;
 у = у - окно.прокрутка;


 лупа.style.transform = `перевести(${х}пкс, ${г}пикселей)`;
константа ширина изображения = 400;
константа высота изображения = 300;


 увеличитель.style.backgroundSize =
 imgWidth * получитьZoomLevel() + "пкс" + imgHeight * получитьZoomLevel() + "пкс";


 увеличитьX = x * getZoomLevel() + 15;
 увеличитьY = y * getZoomLevel() + 15;
 magnifier.style.backgroundPosition = -magnifyX + "пкс" + -увеличитьY + "пкс";
});

Затем добавьте еще один прослушиватель событий в элемент контейнера, но на этот раз прослушиватель событий должен прослушивать событие «mouseout» и добавить «скрытый» класс обратно в элемент лупы всякий раз, когда мышь находится вне контейнера. область.

container.addEventListener("мышь", () => {
 лупа.классСписок.добавить("скрытый");
});

Наконец, добавьте прослушиватель событий к объекту окна для события «mousemove», которое обновляет позиции курсора по осям x и y.

окно.addEventListener("мышь", (д) ​​=> {
 указательX = e.clientX;
 указатель Y = e.clientY;
});

Вот и все! Вам удалось создать увеличительное стекло с помощью ванильного JavaScript.

Как увеличители изображений улучшают взаимодействие с пользователем

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

Этот улучшенный уровень визуального исследования вселяет уверенность в пользователей, поскольку они могут принимать обоснованные решения. Это может способствовать повышению коэффициента конверсии и улучшению удержания клиентов.