ZooMove jQuery spraudnis, lai tuvinātu attēlus uz Hover

Ja esat kādreiz pārlūkojis e-komercijas vietni, kuru jūs, iespējams, esat redzējis attēla tālummaiņas efekts. Jūs pārvietojat produkta fotoattēlu un daļa attēla palielinās par a skaidrāku skatu.

The ZooMove spraudnis ir lielisks veids, kā šo efektu jūsu vietnē. Tas ir darbojas ar jQuery, lai jūs varētu ātri un ātri darboties bez daudz koda.

ZooMove ir pilnīgi brīvs un atvērts, pieejams GitHub jebkuriem ziņkārīgiem izstrādātājiem. To var uzstādīt caur npm, Bower, Dzija, vai lejupielādēt tieši no CDNJS.

Lai iestatītu ZooMove attēlu, jums būs nepieciešams trīs konkrēti faili jūsu lapas galvenē:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Gan ZooMove faili var tikt pārveidotas ja vēlaties ātrāk ielādēt lapas. Varat arī kombinēt CSS failu savā galvenajā stillapā, ja tas ir vieglāk.

Visa reālā maģija notiek HTML, kur jūs varat iestatīt HTML5 datu * atribūti dažādiem efektiem.

Tas ļauj jums amatniecības jūsu pašu pielāgoto tālummaiņas efektu pamatojoties uz četriem dažādiem parametriem:

1. datu zoo mērogs - definē kopējais tālummaiņas izmērs, kad tiek pacelts (piemēram, 2,0 par 200%)
2. datu zoo-pārvietot - nosaka, vai attēls pārvietojas kopā ar kursoru
3. datu zoo-over - definē tālummaiņu parādās virs oriģināla
4. datu zoo-kursoru - definē kursora punkts

Pēdējais piektais parametrs ļauj jums noteikt, ko jauna attēla URL jābūt (ja nepieciešams).

Jūs varat izmantot ZooMove visās galvenajās pārlūkprogrammās, ieskaitot IE9 +. Šis spraudnis ir plaši atbalstīts un tas piedāvā vienu heck lietotāju pieredzi.

Ja meklējat a vienkārša hover-to-zoom bibliotēka ZooMove ir lieliska izvēle. Tas ir pietiekami viegls darboties jebkurā tīmekļa vietnē un tas ir darbojas ar jQuery, tāpēc jums nav nepieciešams uzrakstīt tik daudz koda, lai to iegūtu.

Apmeklējiet galveno lapu, lai to aplūkotu darbībā, un uzziniet par GitHub dokumentāciju, lai uzzinātu vairāk.