JavaScript implementiert Klicken zum Ändern der Bildform (Transformationsanwendung)
|
Klicken Sie mit JavaScript, um die Form des Bildes zu ändern (Transformationsanwendung). Zu Ihrer Information lautet der spezifische Inhalt wie folgt Fügen Sie den Code an:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Anwendung der Transformation</title>
<style type="text/css">
#Kasten{
Breite: 50px;
Höhe: 50px;
Hintergrundfarbe: rot;
/*übersetzen, Verschiebung, Drehung, Rotation, Amplitude, Skalierung, Vergrößerung, Schrägstellung, Neigung*/
/*Transformieren: Verschieben(100px,200px) Drehen(20 Grad) Skalieren(2,0) Verzerren(10 Grad);*/
}
</Stil>
</Kopf>
<Text>
<button id="btn">Verformen</button>
<div id="box"></div>
<Skript>
fenster.onload = Funktion (){
var btn = document.getElementById("btn");
var box = document.getElementById("box");
Var-Index = 0;
btn.onclick = Funktion (){
Index++;
box.style.transform = `übersetzen(${index*100}px,${index*50}px) drehen(${index*10}deg) skalieren(${index*1.3})`;
}
}
</Skript>
</body>
</html>Implementierungs-Effekt-Diagramm:Standardmäßig:
Nach dem Klicken auf „Transformieren“:
Klicken Sie erneut, um mit der Änderung fortzufahren. Das Folgende ist eine Erweiterung der Anwendung der Transformation auf die Bewegung der Uhr:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Digitaluhrgehäuse</title>
<style type="text/css">
*{
Polsterung: 0;
Rand: 0;
}
#Uhr{
Breite: 600px;
Höhe: 600px;
Hintergrund: URL("img/clock.jpg") keine Wiederholung;
Position: relativ;
}
#Stunde,#Minute,#Sekunde
Position: absolut;
Breite: 30px;
Höhe: 600px;
links: 50%;
Rand links: -15px;
}
#Stunde{
Hintergrund: URL("img/hour.png") keine Wiederholung;
}
#Minute{
Hintergrund: URL("img/minute.png") keine Wiederholung;
}
#zweite{
Hintergrund: URL("img/second.png") keine Wiederholung;
}
</Stil>
</Kopf>
<Text>
<div id="Uhr">
<div id="Stunde"></div>
<div id="Minute"></div>
<div id="zweite"></div>
</div>
<Skripttyp="text/javascript">
// 1. Holen Sie sich das Tag var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var Sekunde = document.getElementById("Sekunde");
// 2. Starten Sie den Timer, um die aktuelle Zeit abzurufen setInterval(function (){
// 2.1 Aktuellen Zeitstempel abrufen var now = new Date();
// 2.2 Stunden, Minuten, Sekunden abrufen var s = now.getSeconds();
var m = jetzt.getMinutes() + s/60;
var h = jetzt.getHours()%12 + m/60;
// 2.3 Drehung second.style.transform = `rotate(${s*6}deg)`;
minute.style.transform = `drehen(${m*6}deg)`;
Stunde.Stil.Transformieren = `drehen(${h*30}deg)`;
},10)
</Skript>
</body>
</html>Anbei das Effektbild (es ist jetzt 8:01):
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Detailliertes Tutorial zur Installation von Docker auf CentOS 7.5
>>: Master-Slave-Synchronisationskonfiguration und Lese-/Schreibtrennung der MySQL-Datenbank
Artikel empfehlen
Node.js erstellt ein einfaches Crawler-Case-Tutorial
Vorbereitung Zuerst müssen Sie nodejs herunterlad...
Implementierung eines CSS-Festlayouts auf beiden Seiten und eines adaptiven Layouts in der Mitte
Analysieren Sie vier gängige Methoden und Prinzip...
Vue3-Kompilierungsprozess - Quellcodeanalyse
Vorwort: Vue3 ist schon seit langem verfügbar. Vo...
Detaillierte Erläuterung des Installationsprozesses von MySQL unter Ubuntu 18.04.4
Werfen wir einen Blick auf den Installationsproze...
Detaillierte Erklärung der Linux-Befehle und der Dateisuche
1. Führen Sie eine Dateinamensuche durch which (S...
Beispiele für einige Verwendungstipps für META-Tags in HTML
HTML-Meta-Tag HTML-Meta-Tags können verwendet wer...
Native js implementiert Warenkorb-Logik und -Funktionen
In diesem Artikelbeispiel wird der spezifische Co...
Lösung für das Problem mit transparenten Schriftarten nach dem Aktivieren von ClearType im Internet Explorer
Die Lösung für das Problem mit der transparenten S...
Einfaches Docker Swarm-Tutorial
Schwarm drei virtuelle Maschinen 132,133,134 1. I...
CSS zum Erzielen des Skeleton Screen-Effekts
Beim Laden von Netzwerkdaten wird zur Verbesserun...
Zusammenfassung der Tipps zum Erstellen von Webseiten
Vorwort Dieser Artikel fasst hauptsächlich einige...
CSS-Position feste linke und rechte Doppelpositionierungs-Implementierungscode
CSS-Position Das Positionsattribut gibt den Posit...
Statische IP-Konfigurationsmethode für die Centos8-Brücke in der virtuellen VMware-Maschine
1. Stellen Sie sicher, dass die Netzwerkverbindun...
Verwenden von JS zum Implementieren von Beispielcode für den Algorithmus zur binären Baumdurchquerung
Inhaltsverzeichnis Vorwort 1. Binärer Baum 1.1. D...
So beheben Sie den MySQL-Fehler 1033. Falsche Informationen in der Datei: „xxx.frm“
Problembeschreibung 1. Datenbank der Sammelstelle...