Adja hozzá ezt a praktikus funkciót képeihez, és látogatói értékelni fogják a használhatóságot és a részletekre való odafigyelést.

Ha már böngészett egy bevásárló webhelyet, valószínűleg találkozott már a képnagyító funkcióval. Lehetővé teszi a kép egy adott részének nagyítását a közelebbi megtekintés érdekében. Ennek a kicsi, de hatásos funkciónak a beépítése nagyban javíthatja a felhasználói élményt saját webhelyén.

A képnagyító zökkenőmentes és összefüggő felépítése kihívást jelenthet. De ezeken a lépéseken keresztül létrehozhatja saját képnagyítóját a semmiből, anélkül, hogy harmadik féltől származó beépülő modulokra kellene hagyatkoznia.

Mikor használjon képnagyítót a webprojektben

A képnagyító jól jöhet, ha sok képet tartalmazó projektet épít. Amint azt korábban említettük, a képnagyítók nagyon népszerűek a vásárlási webhelyek körében, mert előfordulhat, hogy a felhasználónak alaposan meg kell vizsgálnia a terméket, mielőtt eldönti, megéri-e megvenni.

Az ügyfelek kizárólag a webhely által biztosított információkra és látványelemekre hagyatkoznak a termék minőségének, jellemzőinek és megjelenésének értékeléséhez. Azonban a statikus képek önmagukban nem mindig biztosítanak kellő tisztaságot, vagy nem teszik lehetővé az elem átfogó értékelését.

instagram viewer

A hagyományos üzletekben a vásárlók fizikailag kezelhetik a termékeket, testközelből megvizsgálhatják azokat, és vásárlás előtt értékelhetik alkalmasságukat. A képnagyítók megpróbálják újrateremteni ezt az élményt azáltal, hogy hasonló szintű ellenőrzést és virtuális vizsgálatot kínálnak a felhasználóknak.

A képnagyítók is jól jöhetnek, ha Ön fotógaléria alkalmazás készítése mivel a kép egy adott részének nagyítása fontos funkció.

A képnagyító felépítése

A projektben használt kód elérhető a GitHub adattár és az MIT licence alapján ingyenesen használható.

Hozzon létre egy mappát, és adjon hozzá egy mappát index.html fájl, stílus.css fájl és main.js fájlt. Adja hozzá ezt az alapkódot az index.html-hez:

html>
<htmllang="en">
<fej>
<metakarakterkészlet="UTF-8" />
<metanév="nézőablak"tartalom="szélesség = eszköz szélessége, kezdeti méret = 1,0" />
<cím>Képnagyítócím>
<linkrel="stíluslap"href="stílus.css" />
fej>


<test>
test>
html>

Benne test címkét, hozzon létre egy div elemet a "fejléc" osztálynévvel. Ezután a „fejléc” div részhez adjon hozzá egy h1 fejléc elemet a képnagyító címének megjelenítéséhez.

Testreszabhatja a szöveget igényeinek megfelelően. Ezután adjon meg két fesztávelemet, amelyek útmutatást adnak a nagyító használatához, és megjelenítik a felhasználó számára az aktuális nagyítási szintet.

A fejléc szakasz után hozzon létre a div elem a "container" osztálynévvel. Ebben a divben adjon hozzá egy másik div elemet a „nagyító” osztálynévvel, és alkalmazza a „rejtett” osztályt, hogy elrejtse a látás elől.

Ez az elem fogja képviselni a nagyító képét. Ezután adjon hozzá egy szkriptcímkét, amelynek „src” attribútuma „/main.js”-re van állítva.

<test>
<divosztály="fejléc">
<h1>Képnagyítóh1>
<span>nyomja meg <erős>Felfelé nyílerős> vagy <erős>Lefelé mutató nyílerős> nak nek
 növelje vagy csökkentse a zoom szintjét.span>


<span>Nagyítási szint: <erősosztály="nagyítási szint">1erős>span>
div>


<divosztály="tartály">
<divosztály="nagyító elrejtve">div>
div>
<forgatókönyvsrc="/main.js">forgatókönyv>
test>

Cserélje ki a kódot a stílus.css fájlt a következővel. Használhatja a CSS előfeldolgozó, mint a Less ha akarod:

:gyökér {
--nagyító-szélesség: 150;
--nagyító-magasság: 150;
}
test {
kijelző: Flex;
flex-irány: oszlop;
align-ites: központ;
}


.tartály {
szélesség: 400px;
magasság: 300px;
háttér méretű: borító;
háttérkép: url("https://cdn.pixabay.com/fénykép/2019/03/27/15/24/állat-4085255_1280.jpg");
háttér-ismétlés: nem-ismétlés;
pozíció: relatív;
kurzor: egyik sem;
}


.nagyító {
határ-sugár: 400px;
doboz-árnyék: 0px 11px 8px 0px#0000008a;
pozíció: abszolút;
szélesség: kalc(var(--nagyító-szélesség) * 1px);
magasság: kalc(var(--nagyító-magasság) * 1px);
kurzor: egyik sem;
háttérkép: url("https://cdn.pixabay.com/fénykép/2019/03/27/15/24/állat-4085255_1280.jpg");
háttér-ismétlés: nem-ismétlés;
}


span {
kijelző: Blokk;
}


.fejléc {
kijelző: Flex;
flex-irány: oszlop;
align-ites: központ;
}


.rejtett {
láthatóság: rejtett;
}
div > span:nth-child (3) {
betűméret: 20px;
}

Ban,-ben main.js fájlban keresse le a HTML elemeket osztálynevekkel, "nagyítóval" és "tárolóval" a document.querySelector módszert, és rendelje hozzá őket a változókhoz nagyító és tartály, ill.

Ezután a getComputedStyle függvény lekérése a szélesség és magasság a nagyító elemet, majd kinyerjük a számértékeket a visszaadott karakterláncokból a segítségével részkarakterlánc és indexe mód.

Rendelje hozzá a kivont szélességet a változóhoz nagyítóSzélesség, és a kivont magasság ig nagyítóMagasság.

hagyja nagyító = dokumentum.querySelector(".nagyító");
hagyja konténer = dokumentum.querySelector(".tartály");
hagyja magnifierWidth = getComputedStyle (nagyító).width.substring(
0,
 getComputedStyle (nagyító).width.indexOf("p")
);
hagyja magnifierHeight = getComputedStyle (nagyító).width.substring(
0,
 getComputedStyle (nagyító).height.indexOf("p")
);

Ezután állítsa be a nagyítási szint, a maximális nagyítási szint, valamint a kurzor és a nagyító képének helyzetét.

hagyja zoomLevelLabel = dokumentum.querySelector(".zoom-level");
hagyja zoom = 2;
hagyja maxZoomLevel = 5;
hagyja pointerX;
hagyja pointerY;
hagyja nagyításX;
hagyja nagyítY;

A fenti kódblokkban pointerX és pointerY mindkettő a kurzor helyzetét jelenti az X és Y tengely mentén.

Most határozzon meg két segédfunkciót: getZoomLevel amely visszaadja az aktuális nagyítási szintet, és getPointerPosition amely visszaad egy objektumot azzal x és y a kurzor koordinátáit.

funkciógetZoomLevel() {
Visszatérés zoomolás;
}
funkciógetPointerPosition() {
Visszatérés { x: pointerX, y: pointerY }
}

Ezután hozzon létre egy hozzáadást updateMagImage függvény, amely egy új MouseEvent objektumot hoz létre a kurzor aktuális pozíciójával, és elküldi azt a tárolóelemnek. Ez a funkció felelős a nagyító képének frissítéséért.

funkcióupdateMagImage() {
hagyja evt = új MouseEvent("egér mozgatása", {
 clientX: getPointerPosition().x,
 ügyfél: getPointerPosition().y,
 buborékok: igaz,
 lemondható: igaz,
 Kilátás: ablak,
 });
 container.dispatchEvent (evt);
}

Most hozzá kell tennie eseményhallgató a "keyup" esemény ablakobjektumához, amely beállítja a nagyítási szintet, amikor a felhasználó megnyomja az "ArrowUp" vagy "ArrowDown" billentyűket.

A "keyup" esemény visszahívási funkciója szintén felelős a nagyítási szint címkéjének frissítéséért és a updateMagImage funkció.

ablak.addEventListener("keyup", (e) => {
ha (pl. kulcs "ArrowUp" && maxZoomLevel - Szám(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 zoom = zoom + 0.3;
 updateMagImage();
 }
ha (pl. kulcs "Nyíl lefelé" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 zoom = zoom - 0.3;
 updateMagImage();
 }
});

Ezután adjon hozzá egy eseményfigyelőt a „mousemove” esemény tárolóeleméhez.

​​​​​​

A visszahívási függvényben adja hozzá azt a funkciót, amely eltávolítja a „rejtett” osztályt a nagyító elemből láthatóvá teszi, és kiszámítja az egér pozícióját a tárolóhoz képest, figyelembe véve az oldal görgetését fiókot.

Ennek a függvénynek be kell állítania a nagyító transzformációs stílusát is a számított pozícióra, és határozza meg a nagyító kép háttérméretét és helyzetét a nagyítási szint és az egér alapján pozíció.

container.addEventListener("egér mozgatása", (e) => {
 magnifier.classList.remove("rejtett");
hagyja rect = container.getBoundingClientRect();
hagyja x = e.oldalX - rect.left;
hagyja y = e.oldalY - rect.top;
 x = x - ablak.scrollX;
 y = y - ablak.scrollY;


 nagyító.style.transform = `fordítani(${x}px, ${y}px)".;
const imgWidth = 400;
const imgHeight = 300;


 magnifier.style.backgroundSize =
 imgWidth * getZoomLevel() + "px" + imgHeight * getZoomLevel() + "px";


 magnifyX = x * getZoomLevel() + 15;
 magnifyY = y * getZoomLevel() + 15;
 magnifier.style.backgroundPosition = -magnifyX + "px" + -nagyításY + "px";
});

Ezután adjon hozzá egy másik eseményfigyelőt a tárolóelemhez, de ezúttal az eseményfigyelőnek figyelnie kell a "mouseout" esemény, és adja vissza a "rejtett" osztályt a nagyító elemhez, amikor az egér kikerül a tárolóból terület.

container.addEventListener("egér ki", () => {
 magnifier.classList.add("rejtett");
});

Végül adjon hozzá egy eseményfigyelőt a "mousemove" esemény ablakobjektumához, amely frissíti a kurzor x és y pozícióját.

ablak.addEventListener("egér mozgatása", (e) => {
 pointerX = e.clientX;
 pointerY = e.clientY;
});

Ez az! Sikerült felépíteni egy képnagyítót vanília JavaScript-szel.

Hogyan javítják a képnagyítók a felhasználói élményt

Azáltal, hogy a felhasználók ráközelíthetnek a kép bizonyos területeire, a nagyító lehetővé teszi számukra, hogy tisztábban vizsgálják meg a termék részleteit.

A vizuális felfedezés e továbbfejlesztett szintje bizalmat ébreszt a felhasználókban, mivel megalapozott döntéseket hozhatnak. Ez hozzájárulhat a megnövekedett konverziós arányokhoz és a jobb ügyfélmegtartáshoz.