Как создать собственную лупу изображения с помощью jQuery?
Взгляд на увеличительное стекло:
Увеличитель изображения - это возможность масштабирования точки курсора. Если вы поместили курсор в определяемый div, изображение будет выдвигаться в режиме масштабирования. Как и на сайтах покупок, эта функция может оказаться полезной, если вы хотите приобрести любую ткань и хотите подробно проверить материал или печать на этом продукте. Чтобы создать увеличительное изображение, мы будем использовать функцию zoom (). Есть похожая статья, как увеличивать и уменьшать изображение с помощью JavaScript? который увеличит всю картинку.
Мы собираемся создать лупу для изображений с помощью jQuery. Ниже приведены некоторые предварительные условия, которые, как мы ожидаем, у вас будут некоторые базовые знания, прежде чем начинать разработку:
- HTML
- CSS
- jQuery
- Бутстрап
Подход: получите координаты страницы и положение мыши с помощью jQuery offset (), чтобы получить относительное положение курсора относительно элемента. Установите для атрибута отображения внешнего контейнера значение block / inline-block, чтобы изображение никогда не переполнялось при увеличении. Устанавливайте верхнее / левое положение относительно контейнера при срабатывании масштабирования. Нам нужно будет откалибровать масштабирование изображения, что требует времени по отношению к контейнеру в разных случаях использования. Следовательно, для того же мы собираемся использовать простой основной плагин jQuery с именем jQuery zoom, который экономит нам много времени, делая то же самое.
Создание структуры: в этом разделе мы создадим базовую структуру. В первую очередь сделаем верстку страницы
- HTML-код для создания структуры:
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"/><!-- Required CDN's --><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script><scriptsrc=</script></head><body><center><h1>GeeksforGeeks</h1></center><divclass="container-fluid"><b>Move your Cursor Over the Image</b><divclass="parent"><imgsrc=</div><spanclass="contain"><!-- Into another container --></span></div></body></html>
Проектирование структуры: в предыдущем разделе мы создали структуру базового макета, в котором мы собираемся использовать лупу.
- Код структуры CSS: в этом разделе мы разработаем макет, добавив некоторую необходимую конфигурацию CSS, необходимую для того же. Свойства стиля, применяемые в контейнере, гарантируют, что изображение никогда не выйдет за пределы контейнера и никогда не выйдет за пределы указанных границ. Пожалуйста, обратитесь к примерам ниже для получения более подробной информации.
<style>body {margin: 20px;}h1 {color: green;}.container {display: block;padding: 0px;}.contain {position: fixed;right: 15%;top: 15%;width: 200px;height: 220px;}img {width: 300px;height: 240px;}</style> - Добавление сценария jQuery: Теперь мы инициализируем сценарий jQuery. Синтаксис выделен ниже:
$ ([Селектор родительского элемента изображения]). Zoom ({Атрибуты}); $ ([Изображение]). Родитель (). Масштабирование ({атрибуты});<script>$(document).ready(function() {$('.parent').css('width', $('img').width());$('img').parent().zoom({magnify: 4,target: $('.contain').get(0)});});</script>Причина использования родительского элемента изображения в качестве селектора: согласно документации репозитория Git-hub, трудно прочитать некоторый макет, связанный со стилями CSS из JavaScript / jQuery, поэтому мы используем здесь родительский элемент, чтобы сделать то же самое, и это одновременно выступая в качестве оболочки для изображения.
Атрибуты функции zoom ():
Имущество По умолчанию Описание на "наведение курсора" Событие, которое будет использоваться для запуска масштабирования. Параметры: наведение курсора, захват, щелчок, переключение продолжительность 120 Скорость затухания эффектов. цель ложный Селектор / элемент DOM, который будет использоваться в качестве родительского контейнера для увеличенного изображения. трогать правда Обеспечивает взаимодействие с помощью Touch. увеличивать 1 Введенное значение умножается на разрешение изображения для увеличения. Перезвоните ложный Функция вызывается при загрузке изображения. onZoomIn ложный Функция вызывается при увеличении изображения. onZoomOut ложный Функция вызывается при уменьшении изображения. Объедините код HTML, CSS и jQuery: это последний код после объединения вышеуказанных разделов.
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"/><!-- Required CDN's --><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</script><scriptsrc=</script><style>body {margin: 20px;}h1 {color: green;}.container {display: block;padding: 0px;}.contain {position: fixed;right: 15%;top: 15%;width: 200px;height: 220px;}img {width: 300px;height: 240px;}</style></head><body><center><h1>GeeksforGeeks</h1></center><divclass="container-fluid"><b>Move your Cursor Over the Image</b><divclass="parent"><imgsrc=</div><spanclass="contain"><!-- Into another container --></span></div><script>$(document).ready(function() {$('.parent').css('width', $('img').width());$('img').parent().zoom({magnify: 4,target: $('.contain').get(0)});});</script></body></html>Выход:
