Jak powiększać i powiększać obraz za pomocą JavaScript?
JavaScript można użyć do manipulowania właściwością stylu elementu HTML, aby stworzyć efekt powiększania i powiększenia. Aby to zrobić, po prostu uzyskaj dostęp do atrybutu szerokości za pomocą właściwości stylu i zwiększ ją lub zmniejsz go zgodnie z wymogiem. Aby uzyskać dostęp do tej właściwości stylu elementu HTML, należy utworzyć i przechowywać odniesienie do elementu HTML. Zejdźmy przez krok po kroku procedurę osiągnięcia zadania.
Krok 1: Konfigurowanie dokumentu HTML
Zacznij od utworzenia nowego dokumentu HTML z następującymi wierszami w nim:
W powyższych liniach:
- Najpierw powstaje nowy element obrazu z lokalnym adresem URL dla obrazu, który zostanie wyświetlony w dokumencie HTML.
- Element obrazu ma ustawiony identyfikator "fotka" Aby JavaScript mógł odwołać się.
- Następnie utwórz nowy przycisk, "Zbliżenie", z właściwością OnClick, która będzie szukała funkcji zbliżenie() w pliku skryptu lub w znaczniku skryptu.
- Następnie utwórz nowy przycisk, „Powiększanie”, która została utworzona z właściwością OnClick, która będzie szukała funkcji zoomout () w pliku skryptu lub w znaczniku skryptu.
Uruchomienie dokumentu HTML w tym momencie da następujące dane wyjściowe w przeglądarce:
Krok 2: Dodanie funkcji za pomocą JavaScript
W drugim etapie utwórz znacznik skryptu w tym samym dokumencie HTML, albo utwórz nowy plik JavaScript i połącz go z dokumentem HTML. Bez względu na to, pierwszą rzeczą w JavaScript jest utworzenie funkcji przycisku powiększania za pomocą następujących wierszy kodu:
funkcja zoomin ()
var pic = dokument.getElementById („pic”);
var szerokość = pic.ClientWidth;
fotka.styl.szerokość = szerokość + 100 + „px”;
W powyższym fragmencie kodu:
- Funkcja Zoomin () została utworzona, co będzie wywoływane za każdym razem, gdy przycisk powiększania zostanie klikany.
- Wewnątrz funkcji pierwszym krokiem jest uzyskanie odniesienia elementu obrazu za pomocą jego identyfikatora i przechowywanie go w zmiennej "fotka".
- Następnie uzyskaj bieżącą szerokość elementu obrazu za pomocą atrybutu ClientWidth.
- A następnie uzyskaj dostęp do właściwości stylu i atrybutu szerokości w właściwości stylu i zwiększ jej wartość, dodając kilka pikseli w bieżącej szerokości obrazu.
To naśladuje efekt powiększenia na obraz za każdym razem, gdy przycisk powiększania jest klikany.
Następnie utwórz funkcję przycisku powiększania za pomocą następujących linii:
funkcja zoomout ()
var pic = dokument.getElementById („pic”);
var szerokość = pic.ClientWidth;
fotka.styl.szerokość = szerokość - 100 + „px”;
W powyższym fragmencie kodu:
- Funkcja Zoomout () została utworzona, co będzie wywoływane za każdym razem, gdy przycisk zoo-Out zostanie klikany.
- Wewnątrz funkcji pierwszym krokiem jest uzyskanie odniesienia elementu obrazu za pomocą jego identyfikatora i przechowywanie go w zmiennej "fotka".
- Następnie uzyskaj bieżącą szerokość elementu obrazu za pomocą atrybutu ClientWidth i przechowuj go wewnątrz "szerokość" zmienny.
- A następnie uzyskaj dostęp do właściwości stylu i atrybutu szerokości w właściwości stylu i zmniejsz jego wartość, usuwając niektóre piksele z bieżącej szerokości elementu obrazu.
To naśladuje efekt powiększenia na obraz za każdym razem, gdy naciska się przycisk powiększania.
Krok 3: Testowanie funkcjonalności
Ostatni krok do uruchomienia dokumentu HTML i obserwowania działania dokumentu HTML jako:
Ponieważ z GIF wynika jasno, że powiększenie i przycisk powiększania działają idealnie zgodnie z przeznaczeniem.
Zakończyć
Łatwo jest naśladować zbliżenie i a powiększenie Efekt na obraz element za pomocą JavaScript. Po konfiguracji dokumentu HTML, przejdź do pliku JavaScript i uzyskaj dostęp do szerokość właściwość obrazu. A następnie zmień wartość tego szerokość właściwość zgodnie z przyciskiem, który został naciśnięty przez użytkownika.