Pievienojiet šo parocīgo funkciju saviem attēliem, un apmeklētāji novērtēs jūsu sniegto lietojamību un uzmanību detaļām.

Ja kādreiz esat pārlūkojis iepirkšanās vietni, iespējams, esat saskāries ar attēla palielināšanas funkciju. Tas ļauj tuvināt noteiktu attēla daļu, lai to skatītu tuvāk. Šīs mazās, bet iedarbīgās funkcijas iekļaušana var ievērojami uzlabot lietotāja pieredzi jūsu vietnē.

Nevainojami un saskaņoti izveidot attēlu palielinātāju var būt izaicinājums. Taču, veicot šīs darbības, varēsiet izveidot savu attēla palielinātāju no jauna, nepaļaujoties uz trešo pušu spraudņiem.

Kad tīmekļa projektā izmantot attēla palielināmo stiklu

Attēlu palielinātājs var noderēt, ja veidojat projektu, kurā ir daudz attēlu. Kā minēts iepriekš, attēlu palielinātāji ir ļoti populāri iepirkšanās vietnēs, jo dažreiz lietotājam var būt nepieciešams rūpīgāk apskatīt produktu, pirms izlemt, vai to ir vērts iegādāties.

Klienti paļaujas tikai uz tīmekļa vietnē sniegto informāciju un vizuālajiem materiāliem, lai novērtētu produkta kvalitāti, īpašības un izskatu. Tomēr statiski attēli vien ne vienmēr var nodrošināt pietiekamu skaidrību vai ļaut visaptveroši novērtēt vienumu.

instagram viewer

Tradicionālajos veikalos pircēji var fiziski rīkoties ar produktiem, tos rūpīgi pārbaudīt un pirms pirkšanas novērtēt to piemērotību. Attēlu palielinātāji mēģina atjaunot šo pieredzi, piedāvājot lietotājiem līdzīga līmeņa pārbaudi un pārbaudi virtuāli.

Ja vēlaties, var noderēt arī attēlu palielinātāji fotogalerijas aplikācijas veidošana jo svarīga funkcija ir tuvināšana konkrētai attēla daļai.

Attēlu lupas izveide

Šajā projektā izmantotais kods ir pieejams a GitHub repozitorijs un to varat izmantot bez maksas saskaņā ar MIT licenci.

Izveidojiet mapi un pievienojiet tai index.html fails, stils.css failu un galvenais.js failu. Pievienojiet šo standarta kodu indeksam.html:

html>
<htmllang="lv">
<galvu>
<metarakstzīmju kopa="UTF-8" />
<metanosaukums="skata logs"saturu="platums = ierīces platums, sākotnējais mērogs = 1,0" />
<virsraksts>Attēlu lupavirsraksts>
<saiterel="stila lapa"href="stils.css" />
galvu>


<ķermeni>
ķermeni>
html>

Iekšpusē ķermeni tagu, izveido div elementu ar klases nosaukumu "header". Pēc tam sadaļā "galvenes" pievienojiet an h1 virsraksta elements, lai parādītu attēla palielinātāja nosaukumu.

Varat pielāgot tekstu savām vajadzībām. Pēc tam iekļaujiet divus diapazona elementus, kas sniedz norādījumus par palielinātāja lietošanu un parāda lietotājam pašreizējo tālummaiņas līmeni.

Pēc galvenes sadaļas izveidojiet a div elements ar klases nosaukumu "konteiners". Šajā div iekšpusē pievienojiet vēl vienu div elementu ar klases nosaukumu "lupa" un izmantojiet "slēpto" klasi, lai to paslēptu.

Šis elements attēlos palielinātāja attēlu. Pēc tam pievienojiet skripta tagu ar "src" atribūtu, kas iestatīts uz "/main.js".

<ķermeni>
<divklasē="galvene">
<h1>Attēlu lupah1>
<span>Nospiediet <stiprs>Bultiņa uz augšustiprs> vai <stiprs>Bultiņa uz lejustiprs> uz
 palielināt vai samazināt tālummaiņas līmeni.span>


<span>Tālummaiņas līmenis: <stiprsklasē="tuvinājuma līmenis">1stiprs>span>
div>


<divklasē="konteiners">
<divklasē="lupa paslēpta">div>
div>
<skriptssrc="/main.js">skripts>
ķermeni>

Nomainiet kodu mapē stils.css failu ar šādu. Varat arī izmantot a CSS priekšprocesors, piemēram, Less Ja tu vēlies:

:root {
-- lupas platums: 150;
-- lupas augstums: 150;
}
ķermeni {
displejs: flex;
flex-virziens: kolonna;
izlīdzināt vienumus: centrs;
}


.konteiners {
platums: 400px;
augstums: 300px;
fona izmērs: piesegt;
fona attēls: url("https://cdn.pixabay.com/foto/2019/03/27/15/24/dzīvnieks-4085255_1280.jpg");
fona atkārtojums: nē-atkārtoties;
pozīciju: radinieks;
kursors: neviens;
}


.lupu {
robeža-rādiuss: 400px;
kaste-ēna: 0px 11px 8px 0px#0000008a;
pozīciju: absolūts;
platums: aprēķins(var(-- lupas platums) * 1px);
augstums: aprēķins(var(-- lupas augstums) * 1px);
kursors: neviens;
fona attēls: url("https://cdn.pixabay.com/foto/2019/03/27/15/24/dzīvnieks-4085255_1280.jpg");
fona atkārtojums: nē-atkārtoties;
}


span {
displejs: bloķēt;
}


.header {
displejs: flex;
flex-virziens: kolonna;
izlīdzināt vienumus: centrs;
}


.slēpts {
redzamība: paslēptas;
}
div > span:nth-child (3) {
fonta izmērs: 20px;
}

Iekš galvenais.js failu, izgūstiet HTML elementus ar klašu nosaukumiem, "lupu" un "konteineru", izmantojot document.querySelector metodi un piešķiriet tos mainīgajiem palielinātājs un konteiners, attiecīgi.

Pēc tam, izmantojot getComputedStyle funkcija izgūt platums un augstums palielinātāja elementu un pēc tam izņemiet skaitliskās vērtības no atgrieztajām virknēm, izmantojot apakšvirkne un indekssOf metodes.

Mainīgajam piešķiriet iegūto platumu lupas platums, un iegūtais augstums līdz palielinātājsAugstums.

ļaut palielinātājs = dokumentu.querySelector(".lupa");
ļaut konteiners = dokumentu.querySelector(".container");
ļaut lupaWidth = getComputedStyle (lupa).width.substring(
0,
 getComputedStyle (lupa).width.indexOf("p")
);
ļaut lupaHeight = getComputedStyle (lupa).width.substring(
0,
 getComputedStyle (lupa).height.indexOf("p")
);

Pēc tam iestatiet mainīgos tālummaiņas līmenim, maksimālajam tālummaiņas līmenim un kursora un palielinātāja attēla pozīcijām.

ļaut zoomLevelLabel = dokumentu.querySelector(". zoom-level");
ļaut tālummaiņa = 2;
ļaut maxZoomLevel = 5;
ļaut pointerX;
ļaut pointerY;
ļaut palielinātX;
ļaut palielinātY;

Iepriekš esošajā koda blokā rādītājsX un rādītājsY abi attēlo kursora pozīciju gar X un Y asīm.

Tagad definējiet divas palīgfunkcijas: getZoomLevel kas atgriež pašreizējo tālummaiņas līmeni, un getPointerPosition kas atgriež objektu ar x un y kursora koordinātas.

funkcijugetZoomLevel() {
atgriezties tālummaiņa;
}
funkcijugetPointerPosition() {
atgriezties { x: pointerX, y: pointerY }
}

Pēc tam izveidojiet pievienošanu updateMagImage funkcija, kas izveido jaunu MouseEvent objektu ar pašreizējo kursora pozīciju un nosūta to uz konteinera elementu. Šī funkcija ir atbildīga par palielinātāja attēla atjaunināšanu.

funkcijuupdateMagImage() {
ļaut evt = jauns MouseEvent("peles kustība", {
 klientsX: getPointerPosition().x,
 klients: getPointerPosition().y,
 burbuļi: taisnība,
 atceļams: taisnība,
 skats: logs,
 });
 konteiners.dispatchEvent (evt);
}

Tagad jums vajadzētu pievienot notikumu klausītājs uz loga objektu notikumam "keyup", kas pielāgo tālummaiņas līmeni, kad lietotājs nospiež taustiņus "ArrowUp" vai "ArrowDown".

Atzvanīšanas funkcija notikumā "taustiņš" ir atbildīga arī par tālummaiņas līmeņa etiķetes atjaunināšanu un updateMagImage funkciju.

logs.addEventListener("taustiņš", (e) => {
ja (piemēram, atslēga "ArrowUp" && maxZoomLevel - Numurs(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 tālummaiņa = tālummaiņa + 0.3;
 updateMagImage();
 }
ja (piemēram, atslēga "Bultiņa uz leju" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 tālummaiņa = tālummaiņa - 0.3;
 updateMagImage();
 }
});

Pēc tam pievienojiet notikumu uztvērēju konteinera elementam notikumam "mousemove".

​​​​​​

Atzvanīšanas funkcijā pievienojiet funkcionalitāti, kas no lupas elementa noņem "slēpto" klasi padarīt to redzamu un aprēķina peles pozīciju attiecībā pret konteineru, ritinot lapu konts.

Šai funkcijai ir jāiestata arī palielinātāja pārveidošanas stils uz aprēķināto pozīciju un nosaka palielinātāja attēla fona izmēru un pozīciju, pamatojoties uz tālummaiņas līmeni un peli pozīciju.

container.addEventListener("peles kustība", (e) => {
 magnifier.classList.remove("slēpts");
ļaut rect = container.getBoundingClientRect();
ļaut x = e.lapaX — taisnā.pa kreisi;
ļaut y = e.lapaY — taisnā augšdaļa;
 x = x - logs.scrollX;
 y = y - logs.scrollY;


 lupa.style.transform = `tulkot(${x}px, ${y}px)”.;
konst imgWidth = 400;
konst imgAugstums = 300;


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


 magnifyX = x * getZoomLevel() + 15;
 magnifyY = y * getZoomLevel() + 15;
 magnifier.style.backgroundPosition = -magnifyX + "px" + -palielinātY + "px";
});

Pēc tam konteinera elementam pievienojiet citu notikumu uztvērēju, bet šoreiz notikumu uztvērējam ir jāieklausās "mouseout" notikumu un pievienojiet "slēpto" klasi atpakaļ palielinātāja elementam ikreiz, kad pele ir ārpus konteinera apgabalā.

container.addEventListener("pele", () => {
 magnifier.classList.add("slēpts");
});

Visbeidzot, loga objektam pievienojiet notikumu uztvērēju notikumam "mousemove", kas atjaunina kursora x un y pozīcijas.

logs.addEventListener("peles kustība", (e) => {
 pointerX = e.clientX;
 pointerY = e.clientY;
});

Tieši tā! Jums ir izdevies izveidot attēla palielinātāju ar vaniļas JavaScript.

Kā attēlu palielinātāji uzlabo lietotāja pieredzi

Ļaujot lietotājiem tuvināt noteiktus attēla apgabalus, palielinātājs ļauj viņiem skaidrāk pārbaudīt informāciju par produktu.

Šis uzlabotais vizuālās izpētes līmenis rada lietotāju uzticību, jo viņi var pieņemt pārdomātus lēmumus. Tas var palielināt reklāmguvumu līmeni un uzlabot klientu noturēšanu.