Плагин ZooMove jQuery для увеличения изображения при наведении

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

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

ZooMove является полностью бесплатным и открытым исходным кодом, доступно на GitHub для любых любопытных разработчиков. Может быть установлен через НПМ, Беседка, пряжа, или скачано напрямую с CDNJS.

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

1. JQuery
2. ZooMove CSS
3. ZooMove JS

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

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

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

1. данные зоопарк масштаб - определяет общий размер при наведении (например, 2,0 на 200%)
2. данные ий-ход - определяет, является ли изображение перемещается вместе с курсором
3. данных зоо- над - определяет увеличенное изображение появляются поверх оригинала
4. Данные-зоопарк-курсор - определяет точка курсора

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

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

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

Посетите главную страницу, чтобы увидеть его в действии, и ознакомьтесь с документацией на GitHub, чтобы узнать больше..