ZooMove jQuery Plugin na zväčšenie obrázkov na hover

Ak ste niekedy prehliadali web e-commerce, ktorý ste pravdepodobne videli efekt zväčšenia obrazu. Podržte kurzor myši na fotku produktu a časť obrázka sa zväčší jasnejší pohľad.

Zásuvný modul ZooMove je skvelý spôsob, ako replikujte tento efekt na vašich stránkach. to je powered by jQuery, takže môžete rýchlo a rýchlo bežať bez veľkého kódu.

ZooMove je úplne zadarmo a open source, k dispozícii na GitHub pre všetkých zvedavých vývojárov. Môže byť inštalovaný cez NPM, altánok, priadze, alebo priamo stiahnuté z CDNJS.

Ak chcete nastaviť obrázok ZooMove, budete potrebovať tri konkrétne súbory v hlavičke vašej stránky:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Obidva súbory ZooMove môže byť minimalizovaný ak chcete rýchlejšie načítať stránky. Môžete tiež skombinovať súbor CSS do hlavného štýlu šablón, ak je to jednoduchšie.

Všetky skutočné kúzla sa stáva v HTML, kde môžete nastavte HTML5 atribúty data * pre rôzne účinky.

To vám umožní vyhotoviť vaše vlastný efekt zoomu založené na štyroch rôznych parametroch:

1. Data-zoo-scale - definuje celková veľkosť zväčšenia pri vznášaní (napríklad 2,0 na 200%)
2. Data-zoo-move - definuje, či sa má obrázok pohybuje sa spolu s kurzorom
3. Data-zoo-over - definuje zväčšený obrázok zobraziť nad originálom
4. Data-zoo-kurzora - definuje kurzor

Posledný piaty parameter vám umožňuje definovať, čo nová adresa URL obrázka by malo byť (ak je to potrebné).

Môžete použiť ZooMove vo všetkých hlavných prehliadačoch, vrátane IE9 +. Tento plugin je široko podporované a ponúka jeden heck skúseností používateľa.

Ak hľadáte jednoduchá knižnica s hover-to-zoomom ZooMove je vynikajúcou voľbou. to je ľahké spustiť na akejkoľvek webovej stránke a je to powered by jQuery, takže nebudete musieť písať toľko kódu, aby ste to pracovali.

Navštívte hlavnú stránku, aby ste ju videli v akcii, a pozrite sa na dokumentáciu v službe GitHub, kde nájdete viac informácií.