ZooMove jQuery Plugin pro Zoom obrázky na Hover

Pokud jste někdy procházeli stránky elektronického obchodu, které jste pravděpodobně viděli efekt zvětšení obrazu. Vznášíte obrázek produktu a část obrázku se zvětší na hodnotu a jasnější pohled.

Plugin ZooMove je skvělý způsob, jak replikovat tento efekt na vašich stránkách. To je powered by jQuery, tak můžete rychle a rychle pracovat bez velkého kódu.

ZooMove je zcela zdarma a open source, dostupný na GitHub pro všechny zvědavé vývojáře. Může být instalován přes npm, Altánek, Příze, nebo stáhnout přímo z CDNJS.

Chcete-li nastavit obrázek ZooMove, budete potřebovat tři specifické soubory v záhlaví stránky:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Oba soubory ZooMove může být zhuštěn Pokud chcete rychlejší načítání stránek. Soubor CSS můžete také zkombinovat do hlavní šablony stylů, pokud je to jednodušší.

Všechna skutečná magie se odehrává v HTML, kde můžete nastavit HTML5 Atributy data- * pro různé účinky.

To vám umožní řemeslné vaše vlastní efekt zvětšení založené na čtyřech různých parametrech:

1. data-zoo-měřítko - definuje celková velikost zoomu při vznášení (např. 2,0 pro 200%)
2. data-zoo-move - definuje, zda má být obrázek se pohybuje spolu s kurzorem
3. data-zoo-over - definuje zvětšený obraz nad originálem
4. data-zoo-kurzor - definuje kurzoru

Poslední pátý parametr umožňuje definovat, co je to nová adresa URL obrázku by mělo být (pokud je to nutné).

ZooMove můžete použít ve všech hlavních prohlížečích, včetně IE9 +. Tento plugin je široce podporován a nabízí jeden sakra uživatelské zkušenosti.

Pokud hledáte jednoduchá knihovna přecházející ke zvětšení ZooMove je vynikající volbou. To je dostatečně lehký spustit na libovolné webové stránce a je to powered by jQuery, takže nebudete muset psát tolik kódu, aby to fungovalo.

Navštivte hlavní stránku a podívejte se na dokumentaci k programu GitHub.