Увеличивайте изображения при наведении курсора на плагин ZooMove jQuery

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

Плагин ZooMove отличный способ повторить этот эффект на вашем сайте. Он работает на jQuery, поэтому вы можете быстро и без проблем запустить его и запустить.

Читайте также: Как создать чистый CSS onClick Image Zoom Effect

ZooMove является полностью бесплатным и открытым исходным кодом, доступным на GitHub для любых любопытных разработчиков. Его можно установить через npm, Bower, Yarn или загрузить напрямую с CDNJS,

Чтобы настроить изображение ZooMove, вам понадобятся три конкретных файла в заголовке страницы:

1. JQuery
2. ZooMove CSS
3. ZooMove JS

Оба файла ZooMove могут быть уменьшены, если вы хотите более быструю загрузку страниц. Вы также можете объединить файл CSS в свою основную таблицу стилей, если это проще.

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

Это позволяет вам создать свой собственный эффект масштабирования, основанный на четырех различных параметрах:

1. data-zoo-scale — определяет общий размер увеличения при наведении (например, 2,0 для 200%)
2. data-zoo-move — определяет, будет ли изображение двигаться вместе с курсором
3. data-zoo-over — определяет увеличенное изображение поверх оригинала
4. data-zoo-cursor — определяет точку курсора

Последний пятый параметр позволяет определить, каким должен быть новый URL-адрес изображения (при необходимости).

Вы можете использовать ZooMove во всех основных браузерах, включая IE9 +. Этот плагин широко поддерживается, и он предлагает один опыт пользователя.
Если вы ищете простую библиотеку для наведения масштаба, ZooMove — отличный выбор. Он достаточно легкий для запуска на любом веб-сайте и работает на jQuery, поэтому вам не нужно писать столько кода, чтобы он работал.

Посетить Главная страница чтобы увидеть это в действии и проверить документацию на GitHub Узнать больше.

Читайте также: 10 библиотек CSS для улучшения эффектов наведения изображения