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:

js erkennt, dass der Bildbereich angeklickt und die Größe nach Belieben geändert werden kann (gilt für mobile Endgeräte) Codebeispiel
Vue.js Klicken Sie auf die Umschaltfläche, um den Inhalt des Beispiels zu ändern
js implementiert die Methode zum Ändern des Seitenhintergrundbildes durch Klicken auf das Bild

<<: Detailliertes Tutorial zur Installation von Docker auf CentOS 7.5

>>: Master-Slave-Synchronisationskonfiguration und Lese-/Schreibtrennung der MySQL-Datenbank