Jak vytvořit lupu s Vanilla JavaScript

Pokud jste někdy procházeli nákupní web, pravděpodobně jste narazili na funkci lupy. Umožňuje vám přiblížit konkrétní část obrázku pro bližší pohled. Začlenění této malé, ale působivé funkce může výrazně zlepšit uživatelský dojem na vašem vlastním webu.

Sestavit lupu plynulým a soudržným způsobem může být problém. Procházení těchto kroků vám však pomůže vytvořit si vlastní lupu od začátku, aniž byste se museli spoléhat na pluginy třetích stran.

Kdy použít lupu ve vašem webovém projektu

Obrazová lupa se může hodit, když vytváříte projekt s velkým množstvím obrázků. Jak již bylo zmíněno dříve, lupy obrázků jsou na nákupních webech velmi oblíbené, protože někdy se uživatel může muset na produkt podívat blíže, než se rozhodne, zda se vyplatí jej koupit.

Zákazníci se při posuzování kvality, funkcí a vzhledu produktu spoléhají výhradně na informace a vizuální prvky poskytované webem. Samotné statické obrázky však nemusí vždy poskytnout dostatečnou jasnost nebo umožnit komplexní hodnocení položky.

V klasických obchodech mohou zákazníci s produkty fyzicky manipulovat, zblízka si je prohlédnout a před nákupem vyhodnotit jejich vhodnost. Obrazové lupy se snaží tento zážitek znovu vytvořit tím, že uživatelům nabízejí podobnou úroveň kontroly a zkoumání virtuálně.

Pokud jste, mohou se vám hodit i lupy vytvoření aplikace fotogalerie protože přiblížení na určitou část obrazu je důležitou funkcí.

Vytvoření lupy

Kód použitý v tomto projektu je k dispozici v a úložiště GitHub a můžete jej používat zdarma pod licencí MIT.

Vytvořte složku a do této složky přidejte soubor index.html soubor, styl.css soubor a main.js soubor. Přidejte tento standardní kód na index.html:

html>
<htmllang="en">
<hlava>
<metaznaková sada="UTF-8" />
<metanázev="výřez"obsah="width=device-width, initial-scale=1.0" />
<titul>Image Lupatitul>
<odkazrel="stylesheet"href="style.css" />
hlava>
<tělo>
tělo>
html>

Uvnitř tělo vytvořte prvek div s názvem třídy "header". Potom do div "header" přidejte an h1 nadpis pro zobrazení názvu vaší lupy.

Text si můžete upravit podle svých potřeb. Dále zahrňte dva prvky rozsahu, které poskytují pokyny pro použití lupy a zobrazují uživateli aktuální úroveň přiblížení.

Po sekci záhlaví vytvořte a div prvek s názvem třídy "kontejner". Do tohoto prvku div přidejte další prvek div s názvem třídy „lupa“ a aplikujte třídu „skrytá“, abyste jej skryli.

Tento prvek bude představovat obrázek lupy. Poté přidejte značku skriptu s atributem „src“ nastaveným na „/main.js“.

<tělo>
<divtřída="záhlaví">
<h1>Image Lupah1>
<rozpětí>lis <silný>Šipka nahorusilný> nebo <silný>Šipka dolůsilný> na
 zvýšit nebo snížit úroveň přiblížení.rozpětí>
<rozpětí>Úroveň přiblížení: <silnýtřída="úroveň přiblížení">1silný>rozpětí>
div>
<divtřída="kontejner">
<divtřída="lupa skryta">div>
div>
<skriptsrc="/main.js">skript>
tělo>

Nahraďte kód v styl.css soubor s následujícím. Můžete také použít a CSS preprocesor jako Less jestli chceš:

:vykořenit {
--šířka lupy: 150;
--výška-lupy: 150;
}
tělo {
Zobrazit: flex;
flex-direction: sloupec;
zarovnat-položky: centrum;
}
.kontejner {
šířka: 400px;
výška: 300px;
velikost pozadí: Pokrýt;
obrázek na pozadí: url("https://cdn.pixabay.com/fotografie/2019/03/27/15/24/zvíře-4085255_1280.jpg");
pozadí-opakování: ne-opakovat;
pozice: relativní;
kurzor: žádný;
}
.lupa {
hraniční poloměr: 400px;
box-shadow: 0px 11px 8px 0px#0000008a;
pozice: absolutní;
šířka: calc(var(--šířka lupy) * 1px);
výška: calc(var(--výška-lupy) * 1px);
kurzor: žádný;
obrázek na pozadí: url("https://cdn.pixabay.com/fotografie/2019/03/27/15/24/zvíře-4085255_1280.jpg");
pozadí-opakování: ne-opakovat;
}
rozpětí {
Zobrazit: blok;
}
.záhlaví {
Zobrazit: flex;
flex-direction: sloupec;
zarovnat-položky: centrum;
}
.skrytý {
viditelnost: skrytý;
}
div > rozpětí:n-té dítě (3) {
velikost písma: 20px;
}

V main.js soubor, načtěte prvky HTML s názvy tříd, "lupou" a "kontejnerem" pomocí document.querySelector a přiřadit je k proměnným lupa a kontejner, resp.

Poté pomocí getComputedStyle funkce načíst šířka a výška prvku lupy a poté pomocí příkazu extrahujte číselné hodnoty z vrácených řetězců podřetězec a indexOf metody.

Přiřaďte extrahovanou šířku proměnné lupaŠířkaa extrahovaná výška do lupaVýška.

nechat lupa = dokument.querySelector(".lupa");
nechat nádoba = dokument.querySelector(".kontejner");
nechat magnifierWidth = getComputedStyle (lupa).width.substring(
0,
 getComputedStyle (lupa).width.indexOf("p")
);
nechat magnifierHeight = getComputedStyle (lupa).width.substring(
0,
 getComputedStyle (lupa).height.indexOf("p")
);

Dále nastavte proměnné pro úroveň přiblížení, maximální úroveň přiblížení a polohy kurzoru a obrazu lupy.

nechat zoomLevelLabel = dokument.querySelector(".zoom-level");
nechat zoom = 2;
nechat maxZoomLevel = 5;
nechat ukazatelX;
nechat ukazatelY;
nechat zvětšitX;
nechat zvětšitY;

V bloku kódu výše ukazatelX a ukazatelY oba představují polohu kurzoru podél os X a Y.

Nyní definujte dvě pomocné funkce: getZoomLevel která vrátí aktuální úroveň přiblížení a getPointerPosition který vrací objekt s X a y souřadnice kurzoru.

funkcegetZoomLevel() {
vrátit se Zvětšení;
}
funkcegetPointerPosition() {
vrátit se { X: pointerX, y: ukazatelY}
}

Dále vytvořte add an aktualizovatMagImage funkce, která vytvoří nový objekt MouseEvent s aktuální pozicí kurzoru a odešle jej do prvku kontejneru. Tato funkce je zodpovědná za aktualizaci obrazu lupy.

funkceaktualizovatMagImage() {
nechat evt = Nový MouseEvent("mousemove", {
 clientX: getPointerPosition().x,
 clientY: getPointerPosition().y,
 bubliny: skutečný,
 zrušitelné: skutečný,
 Pohled: okno,
 });
 container.dispatchEvent (evt);
}

Nyní byste měli přidat posluchač události k objektu okna pro událost "keyup", která upravuje úroveň přiblížení, když uživatel stiskne klávesy "ArrowUp" nebo "ArrowDown".

Funkce zpětného volání u události "keyup" je také zodpovědná za aktualizaci štítku úrovně přiblížení a spouštění aktualizovatMagImage funkce.

okno.addEventListener("klíčovka", (e) => {
-li (e.klíč "šipka nahoru" && maxZoomLevel - Číslo(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 zoom = zoom + 0.3;
 updateMagImage();
 }
-li (e.klíč "šipka dolů" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 zoom = zoom - 0.3;
 updateMagImage();
 }
});

Poté přidejte posluchač události do prvku kontejneru pro událost „mousemove“.

​​​​​​

Ve funkci zpětného volání přidejte funkci, která odebere "skrytou" třídu z prvku lupy zviditelní a vypočítá polohu myši vzhledem ke kontejneru, přičemž přejde na stránku účet.

Tato funkce by také měla nastavit styl transformace lupy na vypočítanou pozici a určit velikost pozadí a polohu obrazu lupy na základě úrovně přiblížení a myši pozice.

container.addEventListener("mousemove", (e) => {
 magnifier.classList.remove("skrytý");
nechat rect = container.getBoundingClientRect();
nechat x = e.stránkaX - obdél.vlevo;
nechat y = e.stránkaY - obdél.nahoře;
 x = x - okno.scrollX;
 y = y - okno.scrollY;
 lupa.styl.transformovat = `přeložit(${x}px, ${y}px)“.;
konst imgWidth = 400;
konst imgVýška = 300;
 magnifier.style.backgroundSize =
 imgWidth * getZoomLevel() + "px" + imgHeight * getZoomLevel() + "px";
 magnifyX = x * getZoomLevel() + 15;
 magnifyY = y * getZoomLevel() + 15;
 magnifier.style.backgroundPosition = -magnifyX + "px" + -zvětšitY + "px";
});

Potom přidejte další posluchač události do prvku kontejneru, ale tentokrát by měl posluchač události naslouchat událost "mouseout" a přidejte třídu "hidden" zpět do prvku lupy, kdykoli je myš mimo kontejner plocha.

container.addEventListener("mouseout", () => {
 magnifier.classList.add("skrytý");
});

Nakonec přidejte posluchač události do objektu okna pro událost "mousemove", která aktualizuje pozice x a y kurzoru.

okno.addEventListener("mousemove", (e) => {
 pointerX = e.clientX;
 ukazatelY = e.klientY;
});

A je to! Podařilo se vám vytvořit lupu s vanilkovým JavaScriptem.

Jak lupy zlepšují uživatelský dojem

Tím, že uživatelům umožňuje přiblížit konkrétní oblasti obrázku, jim lupa umožňuje prozkoumat detaily produktu s větší jasností.

Tato vylepšená úroveň vizuálního průzkumu vzbuzuje v uživatelích důvěru, protože mohou činit informovaná rozhodnutí. To může přispět ke zvýšení míry konverze a lepšímu udržení zákazníků.