So zoomen und zoomen Sie das Bild mit JavaScript?
JavaScript kann verwendet werden, um die Style-Eigenschaft eines HTML-Elements zu manipulieren, um einen Zoom-In- und Zoomeffekt zu erstellen. Zu diesem Zweck zugreifen Sie einfach auf das Breitenattribut mit der Style -Eigenschaft und erhöhen Sie es oder verringern Sie es gemäß den Anforderungen. Um auf diese Stileigenschaft eines HTML -Elements zuzugreifen, muss ein Verweis auf das HTML -Element erstellt und in einer Variablen von JavaScript gespeichert werden. Lassen Sie uns die schrittweise Verfahren zum Erreichen der vorliegenden Aufgabe durchgehen.
Schritt 1: Einrichten des HTML -Dokuments
Erstellen Sie zunächst ein neues HTML -Dokument mit den folgenden Zeilen darin:
In den obigen Zeilen:
- Zunächst wird ein neues Bildelement mit der lokalen URL für ein Bild erstellt, das auf dem HTML -Dokument angezeigt wird.
- Das Bildelement hat die ID auf "Bild" so dass JavaScript es verweisen kann.
- Erstellen Sie danach eine neue Schaltfläche, "Hineinzoomen", mit der Onclick -Eigenschaft, die nach der Funktion sucht hineinzoomen() in der Skriptdatei oder im Skript -Tag.
- Erstellen Sie danach eine neue Schaltfläche, "Rauszoomen", die mit der Onclick -Eigenschaft erstellt wurde, die nach der Funktion sucht Rauszoomen() in der Skriptdatei oder im Skript -Tag.
Ausführen des HTML -Dokuments an diesem Punkt liefert die folgende Ausgabe im Browser:
Schritt 2: Hinzufügen von Funktionen mit JavaScript Hinzufügen
Erstellen Sie im zweiten Schritt entweder ein Skript -Tag im selben HTML -Dokument oder erstellen Sie eine neue JavaScript -Datei und verlinken Sie es mit dem HTML -Dokument. Unabhängig von der Fall ist das erste, was in JavaScript die Funktion für die Taste der Zoom-in-Schaltfläche mit den folgenden Codezeilen erstellt:
Funktion zoomin ()
var pic = dokument.GetElementById ("Bild");
var width = pic.Kundenbreite;
Bild.Stil.Breite = Breite + 100 + "px";
Im obigen Code -Snippet:
- Die Funktion zoomin () wurde erstellt, die jedes Mal aufgerufen wird, wenn die Schaltfläche Zoom-in-Schaltfläche klickt.
- Innerhalb der Funktion besteht der erste Schritt darin, die Referenz des Bildelements mit der ID zu erhalten und in der Variablen zu speichern "Bild".
- Nutzen Sie danach die aktuelle Breite des Bildelements mit dem Clientwidth -Attribut.
- Und dann zugreifen.
Dadurch wird jedes Mal einen Zoom-In-Effekt auf das Bild nachahmen, wenn die Schaltfläche "Zoom-in" klickt.
Erstellen Sie danach die Funktion für die Schaltfläche "Zoom-out" mit den folgenden Zeilen:
Funktion zoomout ()
var pic = dokument.GetElementById ("Bild");
var width = pic.Kundenbreite;
Bild.Stil.Breite = Breite - 100 + "PX";
Im obigen Code -Snippet:
- Funktion zoomout () wurde erstellt, das jedes Mal aufgerufen wird, wenn die Schaltfläche "Zoom-out" klickt.
- Innerhalb der Funktion besteht der erste Schritt darin, die Referenz des Bildelements mit der ID zu erhalten und in der Variablen zu speichern "Bild".
- Nutzen Sie danach die aktuelle Breite des Bildelements, indem Sie das Client -Width -Attribut verwenden und in der "Breite" Variable.
- Und dann zugreifen.
Dadurch wird jedes Mal, wenn die Zoom-Out-Taste gedrückt wird.
Schritt 3: Testen der Funktionalität
Der letzte Schritt, um das HTML -Dokument auszuführen und die Arbeit des HTML -Dokuments so zu beobachten, wie es ist:
Wie aus dem GIF oben klar ist, dass der Zoom-In und der Zoom-Out-Taste perfekt wie beabsichtigt funktionieren.
Einpacken
Es ist ziemlich einfach, a nachzuahmen hineinzoomen und ein Rauszoomen Auswirkung auf ein Bild Element mit Hilfe von JavaScript. Nachdem das HTML-Dokument eingerichtet ist, gehen Sie in die JavaScript-Datei und greifen Sie auf die Breite Eigenschaft des Bildes. Und dann den Wert davon ändern Breite Eigenschaft gemäß der Taste, die vom Benutzer gedrückt wurde.