ZooMove jQuery Plugin Zoom-kuvien siirtämiseen Hover-tilassa

Jos olet koskaan selannut sähköisen kaupankäynnin sivustoa, jota olet todennäköisesti nähnyt kuvan zoomaus. Voit siirtää tuotteen valokuvan ja että osa kuvasta suurenee a selkeämpi näkymä.

ZooMove-laajennus on hyvä tapa toistamaan tämän vaikutuksen sivustossasi. Sen powered by jQuery, joten voit saada sen nopeasti käyttöön ilman paljon koodia.

ZooMove on täysin ilmainen ja avoimen lähdekoodin käytettävissä GitHubissa tahansa utelias kehittäjille. Se voidaan asentaa läpi NPM, neitsytkammio, Lanka, tai ladataan suoraan CDNJS.

ZooMove-kuvan määrittäminen edellyttää kolme erityistä tiedostoa sivun otsikossa:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Molemmat ZooMove-tiedostot voidaan minimoida jos haluat nopeampia sivun latauksia. Voit myös yhdistää CSS-tiedoston päätyyliluetteloon, jos se on helpompaa.

Kaikki todellinen taika tapahtuu HTML: ssä, jossa voit aseta HTML5 data- * attribuutit eri vaikutuksista.

Näin voit käsitellä oma mukautettu zoomaustehoste perustuu neljään eri parametriin:

1. data-eläintarhan-asteikko - määrittelee koko zoomauskoko lepotilassa (esim. 2,0 200%)
2. data-zoo-move - määrittää, onko kuva liikkuu kohdistimen kanssa
3. data-eläintarhan-over - määrittää zoomatun kuvan näkyviin alkuperäisen päälle
4. data-zoo-osoitin - määrittelee kohdistinpiste

Viimeinen viides parametri antaa sinun määrittää, mitä uuden kuvan URL-osoite pitäisi olla (tarvittaessa).

Voit käyttää ZooMovea kaikissa tärkeimmissä selaimissa, mukaan lukien IE9 +. Tämä plugin on laajalti tuettu ja se tarjoaa yhden heckin käyttäjäkokemuksesta.

Jos etsit a yksinkertainen hover-to-zoom-kirjasto ZooMove on erinomainen valinta. Sen tarpeeksi kevyt juosta millä tahansa verkkosivustolla ja se on powered by jQuery, joten sinun ei tarvitse kirjoittaa niin paljon koodia saadaksesi sen toimimaan.

Käy pääsivulla nähdäksesi sen toiminnassa ja tutustu GitHubin dokumentaatioon saadaksesi lisätietoja.