ZooMove jQuery plugin, et suumida pilte hoveris

Kui olete kunagi sirvinud e-kaubanduse saiti, mida olete tõenäoliselt näinud pildi suumimise efekt. Te liigutate toote foto ja see osa pildist suurendab a selgem ülevaade.

The ZooMove plugin on suurepärane võimalus korrata seda efekti saidil. See on powered by jQuery, et saaksite selle kiirelt käivitada ilma palju koodita.

ZooMove on täiesti tasuta ja avatud lähtekoodiga GitHubis uudishimulikele arendajatele. Seda saab paigaldada läbi npm, Bower, Lõng, või allalaaditud otse CDNJS.

ZooMove'i pildi seadistamiseks on vaja kolm konkreetset faili teie lehe päises:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Mõlemad ZooMove failid saab minimeerida kui soovite kiiremaid lehekülje laadimisi. Kui see on lihtsam, võite ka CSS-faili oma peamisele stiilile ühendada.

Kõik tõeline maagia toimub HTML-is, kus saate seadistage HTML5 andmete * atribuudid erinevate mõjude puhul.

See võimaldab teil oma käsitöö oma kohandatud suumiefekt neli erinevat parameetrit:

1. andmete loomaaed - määratleb suumi suuruse suurendamisel (nt 2,0% 200%)
2. data-zoo-move - määratleb, kas pilt on liigub koos kursoriga
3. andmete loomaaed - määratleb suumitud pildi ilmub originaalile
4. andmete loomaaed-kursor - määratleb kursori punkt

Viies viimane parameeter võimaldab teil määrata, mida uue pildi URL peaks olema (vajadusel).

ZooMove'i saate kasutada kõigis suuremates brauserites, sealhulgas IE9 +. See plugin on laialdaselt toetatud ja see pakub ühe kogemuse kasutaja kogemusest.

Kui otsite a lihtne hover-to-zoom teek ZooMove on suurepärane valik. See on piisavalt kerge mis tahes veebisaidil ja see on powered by jQuery, nii et sa ei pea selle töötamiseks nii palju koodi kirjutama.

Külastage põhilehekülge, et seda näha ja GitHubi dokumentatsiooni rohkem teada saada.