Dodaj tę przydatną funkcję do swoich zdjęć, a odwiedzający docenią użyteczność i dbałość o szczegóły.

Jeśli kiedykolwiek przeglądałeś witrynę zakupową, prawdopodobnie natknąłeś się na funkcję powiększania obrazu. Pozwala powiększyć określoną część obrazu, aby uzyskać bliższy widok. Włączenie tej małej, ale znaczącej funkcji może znacznie poprawić wrażenia użytkownika na własnej stronie internetowej.

Zbudowanie lupy obrazu w płynny i spójny sposób może być wyzwaniem. Ale przejście przez te kroki pomoże ci stworzyć od podstaw własną lupę do obrazu, bez konieczności polegania na wtyczkach innych firm.

Kiedy używać lupy obrazu w swoim projekcie internetowym

Lupa obrazu może się przydać podczas tworzenia projektu zawierającego wiele obrazów. Jak wspomniano wcześniej, lupy do obrazów są bardzo popularne na portalach zakupowych, ponieważ czasami użytkownik może potrzebować bliższego przyjrzenia się produktowi, zanim zdecyduje, czy warto go kupić.

Klienci polegają wyłącznie na informacjach i materiałach wizualnych dostarczanych przez witrynę internetową, aby ocenić jakość, cechy i wygląd produktu. Jednak same obrazy statyczne nie zawsze zapewniają wystarczającą przejrzystość lub pozwalają na kompleksową ocenę przedmiotu.

instagram viewer

W tradycyjnych sklepach klienci mogą fizycznie dotykać produktów, przyglądać się im z bliska i oceniać ich przydatność przed zakupem. Lupy obrazu próbują odtworzyć to doświadczenie, oferując użytkownikom podobny poziom kontroli i badania wirtualnie.

Lupy obrazu mogą się również przydać, jeśli jesteś budowanie aplikacji galerii zdjęć ponieważ powiększanie określonej części obrazu jest ważną funkcją.

Budowa Lupy Obrazu

Kod użyty w tym projekcie jest dostępny w formacie Repozytorium GitHub i jest darmowy do użytku na licencji MIT.

Utwórz folder i w tym folderze dodaj plik indeks.html plik, styl.css plik i main.js plik. Dodaj ten szablonowy kod do pliku index.html:

HTML>
<HTMLlang="pl">
<głowa>
<metazestaw znaków=„UTF-8” />
<metanazwa=„rzutnia”treść=„szerokość = szerokość urządzenia, skala początkowa = 1,0” />
<tytuł>Lupa obrazutytuł>
<połączyćrel=„arkusz stylów”href="styl.css" />
głowa>


<ciało>
ciało>
HTML>

W środku ciało tag, utwórz element div o nazwie klasy „header”. Następnie w div „header” dodaj an h1 element nagłówka, aby wyświetlić tytuł lupy obrazu.

Możesz dostosować tekst do swoich potrzeb. Następnie dołącz dwa elementy zakresu, które zawierają instrukcje dotyczące korzystania z lupy i wyświetlają użytkownikowi bieżący poziom powiększenia.

Po sekcji nagłówka utwórz plik dz element o nazwie klasy „kontener”. Wewnątrz tego elementu div dodaj kolejny element div o nazwie klasy „lupa” i zastosuj klasę „ukryty”, aby go ukryć.

Ten element będzie reprezentował obraz lupy. Następnie dodaj tag skryptu z atrybutem „src” ustawionym na „/main.js”.

<ciało>
<dzklasa="nagłówek">
<h1>Lupa obrazuh1>
<Zakres>Naciskać <mocny>Strzałka w góręmocny> Lub <mocny>Strzałka w dółmocny> Do
 zwiększyć lub zmniejszyć poziom powiększenia.Zakres>


<Zakres>Poziom przybliżenia: <mocnyklasa="Poziom przybliżenia">1mocny>Zakres>
dz>


<dzklasa="pojemnik">
<dzklasa="lupa ukryta">dz>
dz>
<scenariuszźródło="/main.js">scenariusz>
ciało>

Zastąp kod w styl.css plik z poniższym. Możesz także użyć A Preprocesor CSS, taki jak Less Jeśli chcesz:

:źródło {
--lupa-szerokość: 150;
--wysokość-lupy: 150;
}
ciało {
wyświetlacz: przewód;
kierunek zginania: kolumna;
wyrównaj elementy: Centrum;
}


.pojemnik {
szerokość: 400piks;
wysokość: 300piks;
rozmiar tła: okładka;
zdjęcie w tle: adres URL("https://cdnpixabay.com/zdjęcie/2019/03/27/15/24/zwierzę-4085255_1280jpg");
powtarzanie tła: bez powtórzeń;
pozycja: względny;
kursor: nic;
}


.lupa {
promień granicy: 400piks;
pudełko-cień: 0piks 11piks 8piks 0piks#0000008a;
pozycja: absolutny;
szerokość: oblicz(rozm(--lupa-szerokość) * 1piks);
wysokość: oblicz(rozm(--wysokość-lupy) * 1piks);
kursor: nic;
zdjęcie w tle: adres URL("https://cdnpixabay.com/zdjęcie/2019/03/27/15/24/zwierzę-4085255_1280jpg");
powtarzanie tła: bez powtórzeń;
}


Zakres {
wyświetlacz: blok;
}


.nagłówek {
wyświetlacz: przewód;
kierunek zginania: kolumna;
wyrównaj elementy: Centrum;
}


.ukryty {
widoczność: ukryty;
}
dz > Zakres:n-te dziecko (3) {
rozmiar czcionki: 20piks;
}

w main.js plik, pobierz elementy HTML z nazwami klas, „lupa” i „kontener” za pomocą document.querySelector metody i przypisać je do zmiennych lupa I pojemnikodpowiednio.

Następnie za pomocą getComputedStyle funkcja pobrać szerokość I wysokość elementu lupy, a następnie wyodrębnij wartości liczbowe ze zwróconych ciągów przy użyciu metody podłańcuch I indeks metody.

Przypisz wyodrębnioną szerokość do zmiennej szerokość lupy, a wyodrębniona wysokość do lupaWysokość.

pozwalać lupa = dokument.querySelector(".lupa");
pozwalać pojemnik = dokument.querySelector(".pojemnik");
pozwalać magnifierWidth = getComputedStyle (lupa).width.substring(
0,
 getComputedStyle (lupa).width.indexOf("P")
);
pozwalać magnifierHeight = getComputedStyle (lupa).width.substring(
0,
 getComputedStyle (lupa).height.indexOf("P")
);

Następnie skonfiguruj zmienne dla poziomu powiększenia, maksymalnego poziomu powiększenia oraz pozycji kursora i obrazu lupy.

pozwalać zoomLevelLabel = dokument.querySelector(".Poziom przybliżenia");
pozwalać powiększenie = 2;
pozwalać maksymalnyPoziomPowiększenia = 5;
pozwalać wskaźnikX;
pozwalać wskaźnikY;
pozwalać powiększX;
pozwalać powiększ Y;

W powyższym bloku kodu wskaźnikX I wskaźnik Y oba reprezentują położenie kursora wzdłuż osi X i Y.

Teraz zdefiniuj dwie funkcje pomocnicze: pobierzPoziomPowiększenia który zwraca bieżący poziom powiększenia i getPointerPosition który zwraca obiekt z X I y współrzędne kursora.

funkcjonowaćpobierzPoziomPowiększenia() {
powrót Powiększenie;
}
funkcjonowaćgetPointerPosition() {
powrót { X: wskaźnikX, y: wskaźnik Y }
}

Następnie utwórz dodaj plik aktualizacjaMagImage funkcja, która tworzy nowy obiekt MouseEvent z bieżącą pozycją kursora i wysyła go do elementu kontenera. Ta funkcja odpowiada za aktualizację obrazu lupy.

funkcjonowaćaktualizacjaMagImage() {
pozwalać evt = nowy Zdarzenie myszy(„przesuń mysz”, {
 klientX: getPointerPosition().x,
 klientY: getPointerPosition().y,
 bąbelki: PRAWDA,
 anulowane: PRAWDA,
 pogląd: okno,
 });
 kontener.dispatchEvent (evt);
}

Teraz powinieneś dodać słuchacz zdarzeń do obiektu okna dla zdarzenia „keyup”, które dostosowuje poziom powiększenia, gdy użytkownik naciska klawisze „Strzałka w górę” lub „Strzałka w dół”.

Funkcja wywołania zwrotnego w zdarzeniu „keyup” jest również odpowiedzialna za aktualizację etykiety poziomu powiększenia i wyzwalanie aktualizacjaMagImage funkcjonować.

okno.addEventListener(„kluczowanie”, (e) => {
Jeśli (np. klucz "Strzałka w górę" && maksymalnyPoziomPowiększenia - Numer(zoomLevelLabel.textContent) !== 0) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1;
 powiększenie = powiększenie + 0.3;
 updateMagImage();
 }
Jeśli (np. klucz "Strzałka w dół" && !(zoomLevelLabel.textContent <= 1)) {
 zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1;
 zoom = zoom - 0.3;
 updateMagImage();
 }
});

Następnie dodaj detektor zdarzeń do elementu kontenera dla zdarzenia „mousemove”.

​​​​​​

W funkcji wywołania zwrotnego dodaj funkcjonalność, która usuwa „ukrytą” klasę z elementu lupy do czyni go widocznym i oblicza pozycję myszy względem kontenera, biorąc pod uwagę przewijanie strony konto.

Ta funkcja powinna również ustawić styl transformacji lupy na obliczoną pozycję i określić rozmiar tła i położenie obrazu lupy na podstawie poziomu powiększenia i myszy pozycja.

kontener.addEventListener(„przesuń mysz”, (e) => {
 magnifier.classList.remove("ukryty");
pozwalać rect = kontener.getBoundingClientRect();
pozwalać x = e.stronaX - prostokąt.lewo;
pozwalać y = e.stronaY - prostokąt.góra;
 x = x - okno.scrollX;
 y = y - okno.przewińY;


 lupa.styl.transformacja = `przetłumacz(${x}piksele, ${y}px)`;
konst imgWidth = 400;
konst imgWysokość = 300;


 lupa.styl.rozmiartła =
 imgWidth * getZoomLevel() + "px" + imgWysokość * getZoomLevel() + "px";


 powiększajX = x * getZoomLevel() + 15;
 powieksz Y = y * getZoomLevel() + 15;
 magnifier.style.backgroundPosition = -magnifyX + "px" + -powiększ Y + "px";
});

Następnie dodaj kolejny detektor zdarzeń do elementu kontenera, ale tym razem detektor zdarzeń powinien nasłuchiwać zdarzenie „mouseout” i dodaj klasę „ukrytą” z powrotem do elementu lupy za każdym razem, gdy mysz jest poza pojemnikiem obszar.

kontener.addEventListener(„wysunięcie myszy”, () => {
 magnifier.classList.add("ukryty");
});

Na koniec dodaj detektor zdarzeń do obiektu okna dla zdarzenia „mousemove”, które aktualizuje pozycje x i y kursora.

okno.addEventListener(„przesuń mysz”, (e) => {
 wskaźnikX = e.klientX;
 wskaźnikY = e.klientY;
});

Otóż ​​to! Udało ci się zbudować lupę obrazu z waniliowym JavaScriptem.

Jak lupy obrazu poprawiają wrażenia użytkownika

Umożliwiając użytkownikom powiększanie określonych obszarów obrazu, lupa pozwala im dokładniej przyjrzeć się szczegółom produktu.

Ten ulepszony poziom eksploracji wizualnej budzi zaufanie użytkowników, ponieważ mogą oni podejmować świadome decyzje. Może to przyczynić się do zwiększenia współczynników konwersji i poprawy utrzymania klientów.