ZooMove jQuery плагін для масштабування зображень на Hover

Якщо ви коли-небудь переглядали веб-сайт електронної торгівлі, ви, ймовірно, бачили ефект масштабування зображення. Наведіть на зображення фотографію продукту, а частина зображення збільшиться для a чітке уявлення.

The Плагін ZooMove це відмінний спосіб повторити цей ефект на вашому сайті. Його живиться від jQuery, так що ви можете отримати це & швидко працює без особливого коду.

ZooMove є повністю вільним і відкритим вихідним кодом, доступним на GitHub для будь-яких цікавих розробників. Вона може бути встановлена ​​через npm, Бауер, Пряжа, або завантажено безпосередньо з CDNJS.

Щоб налаштувати зображення ZooMove, вам знадобиться три конкретні файли у заголовку сторінки:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Обидва ZooMove файли може бути зменшено якщо потрібно швидше завантаження сторінки. Ви також можете поєднати файл CSS зі своєю основною таблицею стилів, якщо це простіше.

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

Це дозволяє створювати ваші власний ефект масштабування на основі чотирьох різних параметрів:

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

Останній п'ятий параметр дозволяє визначити, що URL нового зображення має бути (якщо потрібно).

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

Якщо ви шукаєте проста бібліотека, що наближається до масштабу ZooMove є відмінним вибором. Його досить легкий для запуску на будь-якому веб-сайті живиться від jQuery, так що вам не доведеться писати стільки коду, щоб його працювало.

Відвідайте головну сторінку, щоб побачити її в дії, і ознайомтеся з документацією на GitHub, щоб дізнатися більше.