„ZooMove“ jQuery įskiepis priartinti vaizdus ant „Hover“

Jei kada nors naršėte el. Prekybos svetainę, kurią tikriausiai matėte vaizdo priartinimo efektas. Perkeliate produkto nuotrauką ir kad vaizdo dalis padidina a aiškesnis vaizdas.

The „ZooMove“ papildinys yra puikus būdas pakartoti šį efektą svetainėje. Tai veikia „jQuery“, todėl galite greitai ir greitai paleisti be daug kodo.

„ZooMove“ yra visiškai nemokama ir atvira, prieinama apie GitHub bet kokiems smalsiems kūrėjams. Jis gali būti įdiegtas per npm, Bower, Verpalai, arba atsisiųstas tiesiogiai iš CDNJS.

Jei norite nustatyti „ZooMove“ vaizdą, jums reikės tris konkrečius failus puslapio antraštėje:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Abu „ZooMove“ failai gali būti ištaisyta jei norite greičiau įkelti puslapius. CSS failą taip pat galite sujungti į pagrindinį stiliaus lapą, jei tai lengviau.

Visa tikra magija vyksta HTML, kur galite nustatyti HTML5 duomenų * atributai skirtingų efektų.

Tai leidžia jums plaukioti savo pasirinktinį priartinimo efektą remiantis keturiais skirtingais parametrais:

1. duomenų zoo skalė - apibrėžia bendras mastelio dydis, kai slysta (pvz., 2.0 už 200%)
2. duomenų zoo-judėti - nustato, ar vaizdas yra juda kartu su žymekliu
3. duomenų zoo - apibrėžia priartintą vaizdą pasirodo per originalą
4. duomenų zoo žymeklis - apibrėžia žymeklio taškas

Paskutinis penktasis parametras leidžia jums nustatyti, ką naujo vaizdo URL turėtų būti (jei reikia).

ZooMove galite naudoti visose pagrindinėse naršyklėse, įskaitant IE9 +. Šis įskiepis yra plačiai remiami ir jame yra vienas iš patirties, susijusios su vartotojo patirtimi.

Jei ieškote a paprasta hover-to-zoom biblioteka „ZooMove“ yra puikus pasirinkimas. Tai pakankamai lengvas paleisti bet kurioje svetainėje ir tai veikia „jQuery“, taigi jums nereikės rašyti tiek kodo, kad galėtumėte jį dirbti.

Apsilankykite pagrindiniame puslapyje, kad pamatytumėte jį ir patikrinkite GitHub dokumentaciją, kad sužinotumėte daugiau.