ZooMove jQuery plugin a képek nagyításához

Ha valaha is böngészett egy e-kereskedelmi webhelyen, amit valószínűleg látott kép nagyítása. Egy termékfotót mozgat, és a kép egy része a világosabb nézet.

A ZooMove bővítmény nagyszerű módja másolja ezt a hatást webhelyén. ez a jQuery működteti, így sok kód nélkül gyorsan el tudod érni.

A ZooMove teljesen ingyenes és nyílt forráskódú a GitHubon kíváncsi fejlesztők számára. Be lehet telepíteni NPM, Lugas, fonál, vagy letölthető közvetlenül CDNJS.

A ZooMove kép beállításához szüksége lesz három konkrét fájl az oldalfejlécben:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Mind a ZooMove fájlok lehet finomítani ha gyorsabb oldalakat szeretne betölteni. A CSS-fájlt is össze lehetne kapcsolni a fő stíluslapjába, ha ez könnyebb.

Az igazi varázslat a HTML-ben történik, ahol lehet HTML5 beállítása adat * attribútumok a különböző hatásokért.

Ez lehetővé teszi, hogy kézműves legyen saját egyéni nagyítási hatás négy különböző paraméter alapján:

1. data-zoo-skála - meghatározza a teljes zoomméret, ha lebeg (pl. 2,0% 200%)
2. data-zoo-move - meghatározza, hogy a kép legyen-e a kurzorral együtt mozog
3. data-zoo-over - meghatározza a nagyított képet jelenik meg az eredeti felett
4. data-zoo-kurzor - meghatározza a kurzorpont

Az utolsó ötödik paraméter lehetővé teszi, hogy meghatározza, hogy mi a új kép URL-je kell lennie (ha szükséges).

A ZooMove-t minden főbb böngészőben használhatja, beleértve az IE9 + -ot is. Ez a bővítmény széles körben támogatott és egy heck a felhasználói élményhez.

Ha keres egy egyszerű hover-to-zoom könyvtár A ZooMove kiváló választás. ez elég könnyű bármelyik webhelyen fut, és ez az a jQuery működteti, így nem kell annyi kódot írni, hogy működjön.

Látogasson el a főoldalra, hogy lássa, hogyan működik, és nézze meg a GitHub dokumentációját, hogy többet megtudjon.