jQuery klickt auf den Liebeseffekt

In diesem Artikel wird der spezifische Code des jQuery-Liebeseffekts als Referenz angezeigt, wenn Sie darauf klicken. Der spezifische Inhalt ist wie folgt

Code:

<!DOCTYPE html>
<html lang="de">

    <Kopf>
        <meta charset="UTF-8" />
        <title>Herzeffekt</title>
        <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
        <style type="text/css">
            #Liebe
                Breite: 30px;
                Höhe: 30px;
                /*Rand: 1px durchgehend rot;*/
                Position: absolut;
            }
            
            #Erste {
                Breite: 15px;
                Höhe: 26px;
                Hintergrundfarbe: rot;
                Position: absolut;
                rechts: 3,2px;
                unten: 0;
                transformieren: drehen (45 Grad);
                Rahmenradius: 10px 10px 1px 1px;
                Deckkraft: 1;
            }
            
            #zweite {
                Breite: 15px;
                Höhe: 26px;
                Hintergrundfarbe: rot;
                Position: absolut;
                links: 3,2px;
                unten: 0;
                transformieren: drehen (-45 Grad);
                Rahmenradius: 10px 10px 1px 1px;
                Deckkraft: 1;
            }
        </Stil>
    </Kopf>

    <Körper></Körper>

    <Skripttyp="text/javascript">
        Funktion random(unterer, oberer) {
            returniere Math.floor(Math.random() * (oberer - unterer)) + unterer;
        }
        var body = document.getElementsByTagName("body")[0];
        dokument.onclick = Funktion(e) {
            var num = zufällig(0, 19);
            // Farbarray var color = ["peru", "goldrod", "yellow",
                "chartreuse", "palevioletred", "deeppink",
                "rosa", "blassgrün", "pflaume",
                "dunkelorange", "puderblau", "orange",
                "orange", "orchidee", "rot",
                "Aqua", "Lachs", "Gold", "Rasengrün"
            ]

            var divmain = document.createElement("div");
            var zuerst = document.createElement("div");
            var Sekunde = document.createElement("div");
            //Attribute zu div hinzufügen divmain.setAttribute("id", "love");
            divmain.setAttribute("Klasse", "Liebe");
            first.setAttribute("id", "erste");
            zweite.setAttribute("id", "zweite");
            // Inneres Div zur äußersten Ebene hinzufügen
            divmain.appendChild(erstes);
            divmain.appendChild(Sekunde);
            // Bestimme die Position des Div basierend auf der Mausposition //divmain.style.top = e.pageY + "px";
            //divmain.style.left = e.pageX + "px";
            divmain.style.cssText = "oben:" + e.pageY + "px;links:" + e.pageX + "px";

            // Füge dem herzförmigen Div zufällige Farben hinzu. first.style.backgroundColor = color[num];
            zweite.Stil.Hintergrundfarbe = Farbe[Anzahl];
            body.appendChild(divmain);

            $(".Liebe").animieren({
                Deckkraft: "0",
                oben: "-=50px"
            }, 1500);

        }

        // Mit Timer Seitenmüll löschen setInterval(function() {
            var div = document.getElementsByClassName("Liebe");
            var len = div.Länge;
            Variablennummer;
            für(var i = len - 1; i >= 0; i--) {
                num = parseInt(div[i].style.opacity);
                wenn(Zahl <= 0) {
                    div[i].entfernen();
                }
            }

        }, 3500);
    </Skript>

</html>

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:

Verwenden Sie snowfall.jquery.js, um den Effekt fliegender Herzen auf dem gesamten Bildschirm zu erzielen
jquery+html5 romantische Liebesgeständnis-Animation Code-Sharing
Liebesbaum-Geständnisanimation erstellt mit jQuery und HTML5

<<: VMware vSAN - Zusammenfassung der ersten Schritte

>>: MySQL-Datenbankoptimierung: Detaillierte Erläuterung der Sharding-Operationen für Tabellen und Datenbanken