Начална » Toolkit » ZooMove jQuery Plug-in за увеличаване на изображенията при Hover

    ZooMove jQuery Plug-in за увеличаване на изображенията при Hover

    Ако някога сте разглеждали уебсайт за електронна търговия, вероятно сте виждали ефект на мащабиране на изображението. Задръжте снимка на продукта и тази част от изображението се увеличава за a по-ясна представа.

    Най- ZooMove плъгин е чудесен начин повторете този ефект на сайта си. е задвижвани от jQuery, така че можете да получите това и да стартирате бързо без много код.

    ZooMove е напълно свободен и с отворен код в GitHub за любопитни разработчици. Тя може да бъде инсталирана чрез NPM, беседка, прежда, или изтеглени директно от 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, за да научите повече.