Cum să construiți o lupă de imagine cu JavaScript Vanilla

Dacă ați răsfoit vreodată un site de cumpărături, probabil că ați întâlnit funcția de lupă a imaginii. Vă permite să măriți o anumită parte a unei imagini pentru o vizualizare mai atentă. Încorporarea acestei funcții mici, dar de impact, poate îmbunătăți considerabil experiența utilizatorului pe propriul site web.

Construirea unei lupe de imagine într-o manieră uniformă și coerentă poate fi o provocare. Dar parcurgerea acestor pași vă va ajuta să vă creați propria lupă de imagine de la zero, fără a fi nevoie să vă bazați pe pluginuri terțe.

Când să utilizați o lupă de imagine în proiectul dvs. web

O lupă de imagine poate fi utilă atunci când construiți un proiect cu o mulțime de imagini. După cum am menționat mai devreme, lupele de imagine sunt foarte populare pe site-urile web de cumpărături, deoarece uneori utilizatorul ar putea avea nevoie să se uite mai atent la produs înainte de a decide dacă merită cumpărat.

Clienții se bazează exclusiv pe informațiile și imaginile furnizate de site-ul web pentru a evalua calitatea, caracteristicile și aspectul unui produs. Cu toate acestea, imaginile statice singure pot să nu ofere întotdeauna suficientă claritate sau să permită o evaluare cuprinzătoare a articolului.

În magazinele tradiționale, clienții pot manipula fizic produsele, le pot examina de aproape și pot evalua caracterul adecvat al acestora înainte de a cumpăra. Magnificatoarele de imagine încearcă să recreeze această experiență, oferind utilizatorilor un nivel similar de control și examinare virtual.

Lupele de imagine pot fi, de asemenea, utile dacă sunteți construirea unei aplicații de galerie foto deoarece mărirea unei anumite părți a imaginii este o caracteristică importantă.

Construirea lupă de imagine

Codul folosit în acest proiect este disponibil în a Depozitul GitHub și este gratuit pentru utilizare sub licența MIT.

Creați un folder și, în acel folder, adăugați un index.html fişier, stil.css dosar și main.js fişier. Adăugați acest cod standard la index.html:

html>
<htmllang="ro">
<cap>
<metaset de caractere=„UTF-8” />
<metaNume="vizor"conţinut=„width=device-width, initial-scale=1.0” />
<titlu>Lupa de imaginetitlu>
<legăturărel="foaia de stil"href=„style.css” />
cap>
<corp>
corp>
html>

În interiorul corp tag, creați un element div cu numele clasei „header”. Apoi, în div-ul „antet”, adăugați un h1 element de antet pentru a afișa titlul lupei imaginii.

Puteți personaliza textul în funcție de nevoile dvs. Apoi, includeți două elemente de întindere care oferă instrucțiuni pentru utilizarea lupei și afișează utilizatorului nivelul actual de zoom.

După secțiunea antet, creați un div element cu numele clasei „container”. În interiorul acestui div, adăugați un alt element div cu numele clasei „magnifier” și aplicați clasa „ascunsă” pentru a o ascunde din vedere.

Acest element va reprezenta imaginea lupă. Apoi, adăugați o etichetă de script cu atributul „src” setat la „/main.js”.

<corp>
<divclasă="antet">
<h1>Lupa de imagineh1>
<span>presa <puternic>Săgeată în susputernic> sau <puternic>Săgeată în josputernic> la
 crește sau micșorează nivelul de zoom.span>
<span>Nivel de zoom: <puternicclasă="nivel de zoom">1puternic>span>
div>
<divclasă="container">
<divclasă="lupa ascunsa">div>
div>
<scenariusrc=„/main.js”>scenariu>
corp>

Înlocuiți codul din stil.css fișier cu următoarele. De asemenea, puteți utiliza a Preprocesor CSS ca Less dacă doriți:

:rădăcină {
--lupa-lățime: 150;
--înălțimea-lupă: 150;
}
corp {
afişa: contracta;
flex-direcție: coloană;
alinierea elementelor: centru;
}
.container {
lăţime: 400px;
înălţime: 300px;
dimensiunea fundalului: acoperi;
imagine de fundal: url("https://cdn.pixabay.com/fotografie/2019/03/27/15/24/animal-4085255_1280.jpg");
fundal-repetare: fără repetare;
poziţie: relativ;
cursor: nici unul;
}
.lupă {
hotar-raza: 400px;
cutie-umbră: 0px 11px 8px 0px#0000008a;
poziţie: absolut;
lăţime: calc(var(--lupa-lățime) * 1px);
înălţime: calc(var(--înălțimea-lupă) * 1px);
cursor: nici unul;
imagine de fundal: url("https://cdn.pixabay.com/fotografie/2019/03/27/15/24/animal-4085255_1280.jpg");
fundal-repetare: fără repetare;
}
span {
afişa: bloc;
}
.antet {
afişa: contracta;
flex-direcție: coloană;
alinierea elementelor: centru;
}
.ascuns {
vizibilitate: ascuns;
}
div > span: al-lea copil (3) {
marimea fontului: 20px;
}

În main.js fișier, preluați elementele HTML cu nume de clasă, „lupă” și „container” folosind document.querySelector metoda și atribuiți-le variabilelor lupă și recipient, respectiv.

Apoi, folosind getComputedStyle funcția de a prelua lăţime și înălţime a elementului lupă și apoi extrageți valorile numerice din șirurile returnate folosind subșir și Index de metode.

Atribuiți lățimea extrasă variabilei lupăWidth, iar înălțimea extrasă la lupă Înălțime.

lăsa lupă = document.querySelector(".lupă");
lăsa container = document.querySelector(„.container”);
lăsa magnifierWidth = getComputedStyle (lupa).width.substring(
0,
 getComputedStyle (lupă).width.indexOf("p")
);
lăsa magnifierHeight = getComputedStyle (lupa).width.substring(
0,
 getComputedStyle (lupă).height.indexOf("p")
);

Apoi, setați variabilele pentru nivelul de zoom, nivelul maxim de zoom și pozițiile cursorului și a imaginii de lupă.

lăsa zoomLevelLabel = document.querySelector(„.zoom-level”);
lăsa zoom = 2;
lăsa maxZoomLevel = 5;
lăsa pointerX;
lăsa pointerY;
lăsa măriX;
lăsa mări Y;

În blocul de cod de mai sus, pointerX și pointerY ambele reprezintă poziția cursorului de-a lungul axelor X și Y.

Acum, definiți două funcții de ajutor: getZoomLevel care returnează nivelul actual de zoom și getPointerPosition care returnează un obiect cu X și y coordonatele cursorului.

funcţiegetZoomLevel() {
întoarcere zoom;
}
funcţiegetPointerPosition() {
întoarcere { X: pointerX, y: pointerY }
}

Apoi, creați adăugați un updateMagImage funcție care creează un nou obiect MouseEvent cu poziția curentă a cursorului și îl trimite la elementul container. Această funcție este responsabilă pentru actualizarea imaginii cu lupă.

funcţieupdateMagImage() {
lăsa evt = nou MouseEvent("mousemouse", {
 clientX: getPointerPosition().x,
 clientY: getPointerPosition().y,
 bule: Adevărat,
 anulabil: Adevărat,
 vedere: fereastră,
 });
 container.dispatchEvent (evt);
}

Acum, ar trebui să adaugi un ascultător de evenimente la obiectul fereastră pentru evenimentul „keyup” care ajustează nivelul de zoom atunci când utilizatorul apasă tastele „ArrowUp” sau „ArrowDown”.

Funcția de apel invers la evenimentul „keyup” este, de asemenea, responsabilă pentru actualizarea etichetei nivelului de zoom și declanșarea updateMagImage funcţie.

fereastră.addEventListener("keyup", (e) => {
dacă (e.key „Săgeată în sus” && maxZoomLevel - Număr(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 zoom = zoom + 0.3;
 updateMagImage();
 }
dacă (e.key „Săgeată în jos” && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 zoom = zoom - 0.3;
 updateMagImage();
 }
});

Apoi adăugați un ascultător de evenimente la elementul container pentru evenimentul „mousemove”.

​​​​​​

În funcția de apel invers, adăugați funcționalitatea care elimină clasa „ascunsă” din elementul de lupă la faceți-l vizibil și calculează poziția mouse-ului față de container, luând derularea paginii în cont.

Această funcție ar trebui, de asemenea, să seteze stilul de transformare al lupei la poziția calculată și determinați dimensiunea fundalului și poziția imaginii cu lupă pe baza nivelului de zoom și a mouse-ului poziţie.

container.addEventListener("mousemouse", (e) => {
 magnifier.classList.remove("ascuns");
lăsa rect = container.getBoundingClientRect();
lăsa x = e.pageX - rect.stânga;
lăsa y = e.pageY - rect.top;
 x = x - fereastră.scrollX;
 y = y - fereastră.scrollY;
 lupă.style.transform = `traduce(${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" + -mărireY + „px”;
});

Apoi adăugați un alt ascultător de evenimente la elementul container, dar de data aceasta ascultătorul de evenimente ar trebui să asculte evenimentul „mouseout” și adăugați clasa „ascunsă” înapoi la elementul de lupă ori de câte ori mouse-ul iese din container zonă.

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

În cele din urmă, adăugați un ascultător de evenimente la obiectul fereastră pentru evenimentul „mousemove” care actualizează pozițiile x și y ale cursorului.

fereastră.addEventListener("mousemouse", (e) => {
 pointerX = e.clientX;
 pointerY = e.clientY;
});

Asta este! Ați reușit să construiți o lupă de imagine cu JavaScript vanilla.

Cum lupele de imagine îmbunătățesc experiența utilizatorului

Permițând utilizatorilor să mărească anumite zone ale unei imagini, o lupă le permite să examineze detaliile produsului cu mai multă claritate.

Acest nivel îmbunătățit de explorare vizuală insuflă încredere utilizatorilor, deoarece aceștia pot lua decizii informate. Acest lucru poate contribui la creșterea ratelor de conversie și la îmbunătățirea reținerii clienților.