ZooMove jQuery Plugin pentru a mări imaginile pe hover

Dacă ați navigat vreodată pe un site de comerț electronic pe care probabil l-ați văzut efectul de mărire a imaginii. Plasați o fotografie de produs și această parte a imaginii crește pentru o fotografie o vedere mai clară.

Pluginul ZooMove este o modalitate foarte bună de a replicați acest efect pe site-ul dvs. este powered by jQuery, astfel încât puteți face acest lucru în sus și de funcționare rapid, fără mult cod.

ZooMove este complet gratuit și open source, disponibil pe GitHub pentru orice dezvoltatori curioși. Se poate instala prin NPM, umbrar, fire, sau descărcate direct de la CDNJS.

Pentru a configura o imagine ZooMove, veți avea nevoie trei fișiere specifice în antetul paginii:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Ambele fișiere ZooMove poate fi minificată dacă doriți încărcarea mai rapidă a paginii. Ați putea, de asemenea, să combinați fișierul CSS în foaia de stil principală, dacă acest lucru este mai ușor.

Toată magia reală se întâmplă în HTML unde poți setați HTML5 date- * atribute pentru diferite efecte.

Acest lucru vă permite să vă ambarcațiune propriul efect de zoom personalizat pe baza a patru parametri diferiți:

1. date-grădină zoologică-scară - definește dimensiunea totală a zoom-ului atunci când se deplasează (de exemplu, 2,0 pentru 200%)
2. date-Zoo-mutare - definește dacă imaginea se mișcă împreună cu cursorul
3. date-Zoo-over - definește imaginea mărită apar peste original
4. date-grădină zoologică-cursor - definește cursorul

Un ultim al cincilea parametru vă permite să definiți ce noua adresă URL a imaginii ar trebui să fie (dacă este necesar).

Puteți utiliza ZooMove în toate browserele majore, inclusiv IE9 +. Acest plugin este sprijinit pe scară largă și oferă o bucurie de experiență de utilizator.

Dacă sunteți în căutarea unui hover-to-zoom bibliotecă simplă ZooMove este o alegere excelentă. este destul de ușor pentru a rula pe orice site web și este powered by jQuery, astfel încât nu va trebui să scrieți atât de mult cod pentru ca acesta să funcționeze.

Accesați pagina principală pentru ao vedea în acțiune și consultați documentația despre GitHub pentru a afla mai multe.