Sådan bygger du en billedforstørrelsesglas med Vanilla JavaScript

Hvis du nogensinde har gennemset et shoppingwebsted, er du sikkert stødt på billedforstørrelsesfunktionen. Det lader dig zoome ind på en bestemt del af et billede for at se nærmere. Inkorporering af denne lille, men virkningsfulde funktion kan i høj grad forbedre brugeroplevelsen på din egen hjemmeside.

Det kan være en udfordring at bygge en billedlup på en sømløs og sammenhængende måde. Men at gå gennem disse trin vil hjælpe dig med at skabe din egen billedforstørrelse fra bunden, uden at du behøver at stole på tredjeparts plugins.

Hvornår skal du bruge et billedforstørrelsesglas i dit webprojekt

En billedlup kan være praktisk, når du skal bygge et projekt med mange billeder. Som tidligere nævnt er billedforstørrelsesglas meget populære på shopping-websteder, fordi brugeren nogle gange kan have brug for at se nærmere på produktet, før han beslutter sig for, om det er værd at købe.

Kunder stoler udelukkende på de oplysninger og det visuelle, der leveres af webstedet for at vurdere kvaliteten, funktionerne og udseendet af et produkt. Men statiske billeder alene giver muligvis ikke altid tilstrækkelig klarhed eller giver mulighed for en omfattende evaluering af varen.

I traditionelle butikker kan kunderne fysisk håndtere produkter, granske dem tæt på og vurdere deres egnethed, inden de køber. Billedforstørrelsesglas forsøger at genskabe denne oplevelse ved at tilbyde brugerne et lignende niveau af granskning og undersøgelse virtuelt.

Billedforstørrelsesglas kan også være praktisk, hvis du er opbygning af en fotogalleriapplikation da zoom ind på en bestemt del af billedet er en vigtig funktion.

Opbygning af billedforstørrelsesglas

Koden brugt i dette projekt er tilgængelig i en GitHub-depot og er gratis for dig at bruge under MIT-licensen.

Opret en mappe, og tilføj en index.html fil, style.css fil og main.js fil. Tilføj denne boilerplate-kode til index.html:

html>
<htmllang="da">
<hoved>
<metategnsæt="UTF-8" />
<metanavn="udsigtsport"indhold="width=device-width, initial-scale=1.0" />
<titel>Billedforstørrelsesglastitel>
<linkrel="stylesheet"href="style.css" />
hoved>
<legeme>
legeme>
html>

Inde i legeme tag, skal du oprette et div-element med klassenavnet "header". Tilføj derefter en i "header" div h1 overskriftselement for at vise titlen på dit billedforstørrelsesglas.

Du kan tilpasse teksten, så den passer til dine behov. Dernæst skal du inkludere to span-elementer, der giver instruktioner til brug af forstørrelsesglasset og viser det aktuelle zoomniveau for brugeren.

Efter overskriftssektionen skal du oprette en div element med klassenavnet "container". Inden i denne div skal du tilføje et andet div-element med klassenavnet "magnifier" og anvende den "skjulte" klasse for at skjule det.

Dette element vil repræsentere forstørrelsesbilledet. Tilføj derefter et script-tag med "src"-attributten indstillet til "/main.js".

<legeme>
<divklasse="header">
<h1>Billedforstørrelsesglash1>
<span>Trykke <stærk>Pil opstærk> eller <stærk>Pil nedstærk> til
 øge eller mindske zoomniveauet.span>
<span>Zoomniveau: <stærkklasse="zoom-niveau">1stærk>span>
div>
<divklasse="beholder">
<divklasse="lup skjult">div>
div>
<manuskriptsrc="/main.js">manuskript>
legeme>

Udskift koden i style.css fil med følgende. Du kan også bruge en CSS-forprocessor som Less Hvis du vil:

:rod {
--lup-bredde: 150;
--lup-højde: 150;
}
legeme {
Skærm: bøje;
flex-retning: kolonne;
align-elementer: centrum;
}
.beholder {
bredde: 400px;
højde: 300px;
baggrundsstørrelse: dække over;
baggrundsbillede: url("https://cdn.pixabay.com/Foto/2019/03/27/15/24/dyr-4085255_1280.jpg");
baggrund-gentag: ingen gentagelse;
position: i forhold;
cursoren: ingen;
}
.lup {
grænse-radius: 400px;
kasse-skygge: 0px 11px 8px 0px#0000008a;
position: absolut;
bredde: beregnet(var(--lup-bredde) * 1px);
højde: beregnet(var(--lup-højde) * 1px);
cursoren: ingen;
baggrundsbillede: url("https://cdn.pixabay.com/Foto/2019/03/27/15/24/dyr-4085255_1280.jpg");
baggrund-gentag: ingen gentagelse;
}
span {
Skærm: blok;
}
.header {
Skærm: bøje;
flex-retning: kolonne;
align-elementer: centrum;
}
.skjult {
sigtbarhed: skjult;
}
div > span:nth-child (3) {
skriftstørrelse: 20px;
}

I den main.js fil, skal du hente HTML-elementerne med klassenavne, "magnifier" og "container" ved hjælp af document.querySelector metode og tildele dem til variablerne forstørrelsesglas og beholder, henholdsvis.

Brug derefter getComputedStyle funktion hente bredde og højde af forstørrelseselementet og udtræk derefter de numeriske værdier fra de returnerede strenge ved hjælp af understreng og indeks af metoder.

Tildel variablen den udtrukne bredde forstørrelsesglasBredde, og den udtrukne højde til forstørrelsesglasHøjde.

lade forstørrelsesglas = dokument.querySelector(".magnifier");
lade beholder = dokument.querySelector(".beholder");
lade magnifierWidth = getComputedStyle (magnifier).width.substring(
0,
 getComputedStyle (magnifier).width.indexOf("p")
);
lade magnifierHeight = getComputedStyle (magnifier).width.substring(
0,
 getComputedStyle (magnifier).height.indexOf("p")
);

Indstil derefter variablerne for zoomniveauet, det maksimale zoomniveau og positionerne for markøren og forstørrelsesglasset.

lade zoomLevelLabel = dokument.querySelector(".zoom-niveau");
lade zoom = 2;
lade maxZoomLevel = 5;
lade pointerX;
lade pointerY;
lade forstørreX;
lade forstørreY;

I kodeblokken ovenfor, pointerX og pointerY begge repræsenterer markørens position langs X- og Y-akserne.

Definer nu to hjælpefunktioner: getZoomLevel som returnerer det aktuelle zoomniveau, og getPointerPosition som returnerer et objekt med x og y markørens koordinater.

fungeregetZoomLevel() {
Vend tilbage zoom;
}
fungeregetPointerPosition() {
Vend tilbage { x: pointerX, y: pointerY }
}

Opret derefter tilføje en updateMagImage funktion, som opretter et nyt MouseEvent-objekt med den aktuelle markørposition og sender det til containerelementet. Denne funktion er ansvarlig for at opdatere forstørrelsesglasbilledet.

fungereupdateMagImage() {
lade evt = ny MouseEvent("mousemove", {
 clientX: getPointerPosition().x,
 clientY: getPointerPosition().y,
 bobler: rigtigt,
 kan annulleres: rigtigt,
 udsigt: vindue,
 });
 container.dispatchEvent (evt);
}

Nu skal du tilføje en begivenhedslytter til vinduesobjektet for "keyup"-hændelsen, der justerer zoom-niveauet, når brugeren trykker på tasterne "ArrowUp" eller "ArrowDown".

Tilbagekaldsfunktionen på "keyup"-hændelsen er også ansvarlig for opdatering af zoomniveauetiketten og udløsning af updateMagImage fungere.

vindue.addEventListener("keyup", (e) => {
hvis (e.nøgle "Pil op" && maxZoomLevel - Nummer(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 zoom = zoom + 0.3;
 updateMagImage();
 }
hvis (e.nøgle "Pil ned" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 zoom = zoom - 0.3;
 updateMagImage();
 }
});

Tilføj derefter en begivenhedslytter til containerelementet for "mousemove"-begivenheden.

​​​​​​

I tilbagekaldsfunktionen skal du tilføje den funktionalitet, der fjerner den "skjulte" klasse fra forstørrelseselementet til gør det synligt og beregner musens position i forhold til beholderen, idet der rulles ind i siden konto.

Denne funktion skal også indstille forstørrelsesglassets transformationsstil til den beregnede position, og bestemme baggrundsstørrelsen og placeringen af ​​forstørrelsesglasbilledet baseret på zoomniveauet og musen position.

container.addEventListener("mousemove", (e) => {
 magnifier.classList.remove("skjult");
lade rect = container.getBoundingClientRect();
lade x = e.sideX - ret.venstre;
lade y = e.sideY - rect.top;
 x = x - vindue.scrollX;
 y = y - vindue.scrollY;
 magnifier.style.transform = `oversæt(${x}px, ${y}px)`;
konst imgWidth = 400;
konst imgHøjde = 300;
 magnifier.style.backgroundSize =
 imgWidth * getZoomLevel() + "px" + imgHeight * getZoomLevel() + "px";
 magnifyX = x * getZoomLevel() + 15;
 magnifyY = y * getZoomLevel() + 15;
 magnifier.style.backgroundPosition = -magnifyX + "px" + -magnifyY + "px";
});

Tilføj derefter en anden begivenhedslytter til containerelementet, men denne gang skal begivenhedslytteren lytte efter "mouseout"-begivenhed og føj den "skjulte" klasse tilbage til forstørrelseselementet, når musen er ude af beholderen areal.

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

Til sidst skal du tilføje en begivenhedslytter til vinduesobjektet for "mousemove"-hændelsen, der opdaterer x- og y-positionerne for markøren.

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

Det er det! Du har formået at bygge en billedlup med vanilje JavaScript.

Hvordan billedforstørrelsesglas forbedrer brugeroplevelsen

Ved at give brugerne mulighed for at zoome ind på bestemte områder af et billede, lader en forstørrelsesglas dem undersøge produktdetaljer med større klarhed.

Dette forbedrede niveau af visuel udforskning indgyder tillid hos brugerne, da de kan træffe informerede beslutninger. Dette kan bidrage til øgede konverteringsrater og forbedret kundefastholdelse.