Увеличивайте изображения при наведении курсора на плагин ZooMove jQuery
Если вы когда-либо просматривали сайт электронной коммерции, вы, вероятно, видели эффект увеличения изображения. Вы наводите фотографию продукта, и эта часть изображения увеличивается для более четкого обзора.
Плагин ZooMove отличный способ повторить этот эффект на вашем сайте. Он работает на jQuery, поэтому вы можете быстро и без проблем запустить его и запустить.
Читайте также: Как создать чистый CSS onClick Image Zoom Effect
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
ZooMove является полностью бесплатным и открытым исходным кодом, доступным на GitHub для любых любопытных разработчиков. Его можно установить через npm, Bower, Yarn или загрузить напрямую с CDNJS,
Чтобы настроить изображение ZooMove, вам понадобятся три конкретных файла в заголовке страницы:
- JQuery
- ZooMove CSS
- ZooMove JS
Оба файла ZooMove могут быть уменьшены, если вы хотите более быструю загрузку страниц. Вы также можете объединить файл CSS в свою основную таблицу стилей, если это проще.
Вся настоящая магия происходит в HTML, где вы можете установить атрибуты data5 * для различных эффектов.
Это позволяет вам создать свой собственный эффект масштабирования, основанный на четырех различных параметрах:
- data-zoo-scale — определяет общий размер увеличения при наведении (например, 2,0 для 200%)
- data-zoo-move — определяет, будет ли изображение двигаться вместе с курсором
- data-zoo-over — определяет увеличенное изображение поверх оригинала
- data-zoo-cursor — определяет точку курсора
Последний пятый параметр позволяет определить, каким должен быть новый URL-адрес изображения (при необходимости).
Вы можете использовать ZooMove во всех основных браузерах, включая IE9 +. Этот плагин широко поддерживается, и он предлагает один опыт пользователя.
Если вы ищете простую библиотеку для наведения масштаба, ZooMove — отличный выбор. Он достаточно легкий для запуска на любом веб-сайте и работает на jQuery, поэтому вам не нужно писать столько кода, чтобы он работал.
Посетить Главная страница чтобы увидеть это в действии и проверить документацию на GitHub Узнать больше.
Читайте также: 10 библиотек CSS для улучшения эффектов наведения изображения
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)