Kaip sukurti vaizdo didintuvą naudojant „Vanilla JavaScript“.

Jei kada nors naršėte prekybos svetainėje, tikriausiai susidūrėte su vaizdo didinimo funkcija. Tai leidžia priartinti tam tikrą vaizdo dalį, kad galėtumėte pamatyti iš arčiau. Įtraukus šią nedidelę, bet veiksmingą funkciją, galima labai pagerinti naudotojo patirtį jūsų svetainėje.

Sukurti vaizdo didintuvą sklandžiai ir darniai gali būti iššūkis. Tačiau atlikdami šiuos veiksmus galėsite sukurti savo vaizdo didintuvą nuo nulio ir nereikės pasikliauti trečiųjų šalių papildiniais.

Kada naudoti vaizdo didintuvą savo žiniatinklio projekte

Vaizdo didintuvas gali praversti, kai kuriate projektą su daugybe vaizdų. Kaip minėta anksčiau, vaizdo didintuvai yra labai populiarūs apsipirkimo svetainėse, nes kartais vartotojui gali tekti atidžiau pažvelgti į produktą prieš nuspręsdamas, ar verta jį pirkti.

Klientai, vertindami produkto kokybę, savybes ir išvaizdą, pasikliauja tik svetainėje pateikta informacija ir vaizdiniais elementais. Tačiau vien statiniai vaizdai ne visada gali suteikti pakankamai aiškumo arba leisti visapusiškai įvertinti elementą.

Tradicinėse parduotuvėse pirkėjai gali fiziškai tvarkyti gaminius, iš arti juos apžiūrėti ir prieš pirkdami įvertinti jų tinkamumą. Vaizdo didintuvai bando atkurti šią patirtį, siūlydami naudotojams panašų tikrinimo ir tikrinimo lygį virtualiai.

Vaizdo didintuvai taip pat gali būti naudingi, jei esate nuotraukų galerijos programos kūrimas nes priartinimas prie konkrečios vaizdo dalies yra svarbi funkcija.

Vaizdo didintuvo kūrimas

Šiame projekte naudojamas kodas yra prieinamas a GitHub saugykla ir jūs galite nemokamai naudotis pagal MIT licenciją.

Sukurkite aplanką ir tame aplanke pridėkite index.html failas, stilius.css failas ir main.js failą. Pridėkite šį pagrindinį kodą prie index.html:

html>
<htmllang="en">
<galva>
<metasimbolių rinkinys="UTF-8" />
<metavardas="žiūros sritis"turinys="plotis = įrenginio plotis, pradinė skalė = 1,0" />
<titulą>Vaizdo didintuvastitulą>
<nuorodarel="stiliaus lapas"href="stilius.css" />
galva>
<kūnas>
kūnas>
html>

Viduje kūnas žymą, sukurkite div elementą klasės pavadinimu „antraštė“. Tada skyrelyje „antraštė“ pridėkite an h1 antraštės elementą, kad būtų rodomas vaizdo didintuvo pavadinimas.

Galite tinkinti tekstą pagal savo poreikius. Tada įtraukite du intervalo elementus, kuriuose pateikiamos didintuvo naudojimo instrukcijos ir vartotojui rodomas dabartinis mastelio keitimo lygis.

Po antraštės skyriaus sukurkite a div elementas su klasės pavadinimu „konteineris“. Šiame „div“ viduje pridėkite kitą div elementą su klasės pavadinimu „didintuvas“ ir pritaikykite „paslėptą“ klasę, kad paslėptumėte jį nuo vaizdo.

Šis elementas parodys didintuvo vaizdą. Tada pridėkite scenarijaus žymą, kurios atributas „src“ nustatytas į „/main.js“.

<kūnas>
<divklasė="antraštė">
<h1>Vaizdo didintuvash1>
<span>Paspauskite <stiprus>Rodyklė aukštynstiprus> arba <stiprus>Rodyklė žemynstiprus> į
 padidinti arba sumažinti priartinimo lygį.span>
<span>Mastelio keitimo lygis: <stiprusklasė="didinimo lygis">1stiprus>span>
div>
<divklasė="konteineris">
<divklasė="didintuvas paslėptas">div>
div>
<scenarijussrc="/main.js">scenarijus>
kūnas>

Pakeiskite kodą stilius.css failą su tokia informacija. Taip pat galite naudoti a CSS pirminis procesorius kaip Less Jeigu nori:

:root {
--didintuvo plotis: 150;
--didintuvo aukštis: 150;
}
kūnas {
ekranas: lankstus;
lankstumo kryptis: stulpelyje;
išlyginti elementus: centras;
}
.konteineris {
plotis: 400px;
aukščio: 300px;
fono dydžio: viršelis;
fono vaizdas: url("https://cdn.pixabay.com/nuotrauka/2019/03/27/15/24/gyvūnas-4085255_1280.jpg");
fono kartojimas: nekartoti;
padėtis: giminaitis;
žymeklį: nė vienas;
}
.didintuvas {
pasienio spindulys: 400px;
dėžutė-šešėlis: 0px 11px 8px 0px#0000008a;
padėtis: absoliutus;
plotis: skaičiuok(var(--didintuvo plotis) * 1px);
aukščio: skaičiuok(var(--didintuvo aukštis) * 1px);
žymeklį: nė vienas;
fono vaizdas: url("https://cdn.pixabay.com/nuotrauka/2019/03/27/15/24/gyvūnas-4085255_1280.jpg");
fono kartojimas: nekartoti;
}
span {
ekranas: blokas;
}
.antraštė {
ekranas: lankstus;
lankstumo kryptis: stulpelyje;
išlyginti elementus: centras;
}
.paslėpta {
matomumas: paslėptas;
}
div > span:nth-child (3) {
šrifto dydis: 20px;
}

Viduje main.js failą, gaukite HTML elementus su klasių pavadinimais, „didintuvu“ ir „konteineriu“, naudodami document.querySelector metodą ir priskirkite juos kintamiesiems didintuvas ir konteineris, atitinkamai.

Tada, naudojant getComputedStyle funkcija gauti plotis ir aukščio didinamojo elemento, tada iš gautų eilučių ištraukite skaitines reikšmes naudodami poeilutė ir indexOf metodus.

Priskirkite išskirtą plotį kintamajam didintuvasPlotis, o ištrauktas aukštis iki didintuvasAuktis.

leisti didintuvas = dokumentas.querySelector(".didintuvas");
leisti konteineris = dokumentas.querySelector(".container");
leisti magnifierWidth = getComputedStyle (didinamasis stiklas).width.substring(
0,
 getComputedStyle (didintuvas).width.indexOf("p")
);
leisti magnifierHeight = getComputedStyle (didinamasis stiklas).width.substring(
0,
 getComputedStyle (didintuvas).height.indexOf("p")
);

Tada nustatykite mastelio, maksimalaus priartinimo lygio ir žymeklio bei didinamojo vaizdo padėties kintamuosius.

leisti zoomLevelLabel = dokumentas.querySelector(".zoom-level");
leisti priartinti = 2;
leisti maxZoomLevel = 5;
leisti pointerX;
leisti rodyklėY;
leisti padidintiX;
leisti padidintiY;

Aukščiau esančiame kodo bloke rodyklėX ir rodyklėY abu žymi žymeklio padėtį išilgai X ir Y ašių.

Dabar apibrėžkite dvi pagalbinės funkcijas: getZoomLevel kuris grąžina dabartinį mastelio lygį, ir getPointerPosition kuris grąžina objektą su x ir y žymeklio koordinates.

funkcijagetZoomLevel() {
grąžinti priartinti;
}
funkcijagetPointerPosition() {
grąžinti { x: pointerX, y: rodyklėY }
}

Tada sukurkite pridėti an updateMagImage funkcija, kuri sukuria naują MouseEvent objektą su dabartine žymeklio padėtimi ir siunčia jį į konteinerio elementą. Ši funkcija yra atsakinga už didinamojo vaizdo atnaujinimą.

funkcijaupdateMagImage() {
leisti evt = naujas MouseEvent("mousemove", {
 clientX: getPointerPosition().x,
 klientas: getPointerPosition().y,
 burbuliukai: tiesa,
 atšaukiamas: tiesa,
 peržiūrėti: langas,
 });
 konteineris.dispatchEvent (evt);
}

Dabar turėtumėte pridėti įvykių klausytojas į lango objektą „keyup“ įvykiui, kuris koreguoja mastelio lygį, kai vartotojas paspaudžia „ArrowUp“ arba „ArrowDown“ klavišus.

Atskambinimo funkcija „keyup“ įvykyje taip pat yra atsakinga už mastelio keitimo lygio etiketės atnaujinimą ir updateMagImage funkcija.

langas.addEventListener("raktas", (e) => {
jeigu (e. raktas "ArrowUp" && maxZoomLevel - Skaičius(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 priartinimas = priartinimas + 0.3;
 updateMagImage();
 }
jeigu (e. raktas "Arrow Down" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 priartinti = priartinti - 0.3;
 updateMagImage();
 }
});

Tada pridėkite įvykių klausytoją prie įvykio „mousemove“ sudėtinio rodinio elemento.

​​​​​​

Atgalinio skambinimo funkcijoje pridėkite funkciją, kuri pašalina „paslėptą“ klasę iš didinamojo elemento padaryti jį matomą ir apskaičiuoja pelės padėtį sudėtinio rodinio atžvilgiu, slenkant į puslapį sąskaitą.

Ši funkcija taip pat turėtų nustatyti padidintuvo transformavimo stilių į apskaičiuotą padėtį ir nustatykite didinamojo vaizdo fono dydį ir padėtį pagal priartinimo lygį ir pelę padėtis.

container.addEventListener("mousemove", (e) => {
 magnifier.classList.remove("paslėpta");
leisti rect = konteineris.getBoundingClientRect();
leisti x = e.puslapisX – ties.kairėje;
leisti y = e.puslapisY – tiesioji viršus;
 x = x - langas.scrollX;
 y = y - langas.scrollY;
 didintuvas.style.transform = `išversti (${x}px, ${y}px)“.;
konst imgWidth = 400;
konst imgAukštis = 300;
 magnifier.style.backgroundSize =
 imgWidth * getZoomLevel() + "px" + imgHeight * getZoomLevel() + "px";
 magnifyX = x * getZoomLevel() + 15;
 padidintiY = y * getZoomLevel() + 15;
 magnifier.style.backgroundPosition = -magnifyX + "px" + -padidintiY + "px";
});

Tada prie sudėtinio rodinio elemento pridėkite kitą įvykių klausytoją, bet šį kartą įvykių klausytojas turėtų klausytis „mouseout“ įvykį ir pridėkite „paslėptą“ klasę atgal į didintuvo elementą, kai pelė išimama iš konteinerio plotas.

container.addEventListener("mouseout", () => {
 magnifier.classList.add("paslėpta");
});

Galiausiai prie „mousemove“ įvykio lango objekto pridėkite įvykių klausytoją, kuris atnaujina žymeklio x ir y pozicijas.

langas.addEventListener("mousemove", (e) => {
 pointerX = e.clientX;
 pointerY = e.clientY;
});

Viskas! Jums pavyko sukurti vaizdo didintuvą su vaniliniu JavaScript.

Kaip vaizdo didintuvai pagerina vartotojo patirtį

Leisdamas vartotojams priartinti konkrečias vaizdo sritis, didintuvas leidžia aiškiau ištirti gaminio detales.

Šis patobulintas vizualinio tyrinėjimo lygis skatina naudotojų pasitikėjimą, nes jie gali priimti pagrįstus sprendimus. Tai gali padėti padidinti konversijų rodiklius ir pagerinti klientų išlaikymą.