Natives JS zum Erreichen von Spezialeffekt-Meldungsfeldern

In diesem Artikel wird ein Nachrichtenfeld mit Spezialeffekten vorgestellt, das mit nativem JS implementiert wurde. Der Effekt ist wie folgt:

Der Implementierungscode lautet wie folgt. Sie können ihn gerne kopieren und einfügen.

<!DOCTYPE html>
<html>
 
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
    <title>Natives JS zur Implementierung eines Nachrichtenfelds mit Spezialeffekten</title>
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0
        }
 
        Textbereich {
            Überlauf: automatisch;
            Größenänderung: keine;
        }
 
        li {
            Listenstil: keiner;
        }
 
        html {
            Höhe: 100%;
        }
 
        Körper {
            Hintergrund: #570226;
            Höhe: 100%;
            Schriftart: Arial, Helvetica, serifenlos;
        }
 
        h2 {
            Schriftfamilie: Arial, Helvetica, serifenlos
        }
 
        .wickeln {
            Breite: 740px;
            Höhe: 498px;
            Hintergrundfarbe: #a72244;
            Rahmenradius: 30px;
            Position: absolut;
            oben: 50 %;
            links: 50%;
            Rand links: -370px;
            Rand oben: -249px;
            Überlauf: versteckt;
        }
 
        #Kopf {
            Position: absolut;
            links: 50px;
            oben: 20px;
            Schriftgröße: 20px;
            Farbe: #fff;
            Zeilenhöhe: 28px;
            Textschatten: 2px 2px 0 #a72244;
        }
 
        #Kopf .Titel {
            Position: absolut;
            Breite: 340px;
            oben: -100px;
        }
 
        #Kopf .url {
            Schriftgröße: 14px;
            Position: absolut;
            oben: 28px;
            Deckkraft: 0;
            Filter: Alpha (Deckkraft = 0);
            links: 700px;
            Breite: 340px;
        }
 
        #Liste {
            Position: absolut;
            links: 164px;
            oben: -100px;
        }
 
        #Liste li {
            Position: absolut;
            oben: 0;
            links: 0;
        }
 
        .Liste-links {
            Breite: 80px;
            Höhe: 80px;
            Hintergrundfarbe: rot;
            Rahmenradius: 40px;
            Position: relativ;
            Textausrichtung: zentriert;
            Zeilenhöhe: 80px;
            Schriftgröße: 20px;
            Farbe: #f8f8f8;
            Z-Index: 5;
        }
 
        .text {
            Breite: 0;
            Höhe: 0;
            Rand: 1px durchgezogen #4C4042;
            Zeilenhöhe: 26px;
            Schriftgröße: 12px;
            Schriftfamilie: Arial, Helvetica, serifenlos;
            Farbe: #000;
            Position: absolut;
            links: 30px;
            oben: 20px;
            Z-Index: 2;
            Rahmenradius: 19px;
            Gliederung: keine;
        }
 
 
        #btn {
            Breite: 50px;
            Höhe: 50px;
            Hintergrundfarbe: rot;
            Rahmenradius: 40px;
            Position: absolut;
            Textausrichtung: zentriert;
            Schriftgröße: 12px;
            Farbe: #fff;
            Polsterung: 15px;
            Zeilenhöhe: 20px;
            Textdekoration: keine;
            Z-Index: 20;
            links: 335px;
            oben: -240px;
        }
    </Stil>
    <script src="js/public.js"></script>
    <Skript>
        fenster.onload = Funktion () {
            zuKopf();
        };
        // Fröhliche Nachrichtenfeld-Texteffekte, sehr klassische Funktion toHead() {
            var oHead = id("Kopf");
            var oUrl = oHead.children[1];
            var oTitle = oHead.children[0]
            var aTitle = oTitle.innerHTML.split("");
            var iNow = 0;
            var oTimer = null;
            var i = 0;
            // "Happy Message Box" aufteilen für (i = 0; i < aTitle.length; i++) {
                aTitel[i] = "<span>" + aTitel[i] + "</span>";
            }
            oTitel.innerHTML = aTitel.join("");
            aTitel = oTitel.Kinder;
            für (i = 0; i < aTitel.Länge; i++) {
                aTitel[i].style.left = aTitel[i].offsetLeft + "px";
                aTitel[i].style.top = aTitel[i].offsetTop + "px";
            }
            für (i = 0; i < aTitel.Länge; i++) {
                aTitle[i].style.position = "absolut";
            }
            oTimer = Intervall setzen(
                Funktion () {
                    if (iNow == aTitel.Länge) {
                        oTimer;
                        // www.baidu.com sportsstarMove(oUrl, { links: 0, Deckkraft: 100 }, 0, Funktion () {
                            // Titel QQ-Inhalt Sehr geehrte Damen und Herren, bitte vervollständigen Sie dies und beginnen Sie mit der Übung toList();
                        });
                    } anders {
                        // Bewegung der Happy-Message starMove(aTitle[iNow], { top: 100 }, 1);
                        iJetzt++;
                    }
                },
                50);
        };
 
        Funktion toList() {
            var oList = id("Liste");
            var oBtn = id("btn");
            var aLi = oList.getElementsByTagName("li");
            var aText = getClass('text', oList);
            var aStyle = [
                {
                    Höhe: 26,
                    Breite: 246,
                    Polsterung Unten: 5,
                    Polsterung oben: 5,
                    paddingLeft: 50,
                    Polsterung rechts: 50
                },
                {
                    Höhe: 26,
                    Breite: 246,
                    Polsterung Unten: 5,
                    Polsterung oben: 5,
                    paddingLeft: 50,
                    Polsterung rechts: 50
                },
                {
                    Höhe: 140,
                    Breite: 246,
                    Polsterung Unten: 5,
                    Polsterung oben: 5,
                    paddingLeft: 50,
                    Polsterung rechts: 50
                }
            ];
            var i = 0;
            für (i = 0; i < aLi.Länge; i++) {
                aLi[i].style.zIndex = aLi.Länge - i;
            }
            starMove(oList, { oben: 94 }, 1, Funktion () {
                starMove(einText[0], einStil[0], 1);
                starMove(aLi[2], { top: 85 }, 1);
                starMove(aLi[1], { oben: 85 }, 1, Funktion () {
                    starMove(einText[1], einStil[1], 1);
                    starMove(aLi[2], { oben: 170 }, 1, Funktion () {
                        starMove(einText[2], einStil[2], 1, Funktion () {
                            starMove(oBtn, { oben: 0 }, 1);
                        });
                    });
                });
            });
        };
    </Skript>
</Kopf>
 
<Text>
    <div Klasse="wrap">
        <form method="get" id="form">
            <h2 id="Kopf">
                <strong class="title">Glückwunsch-Nachrichtenbox</strong>
                <span class="url">www.baidu.com</span>
            </h2>
            <div id="Liste">
                <ul>
                    <li>
                        <h3 class="list-left">Titel</h3>
                        <input type="text" value="" class="text" name="title" disabled="deaktiviert" />
                    </li>
                    <li>
                        <h3 Klasse="Liste-links">QQ</h3>
                        <input Typ="text" Wert="" Klasse="text" Name="QQ" deaktiviert="deaktiviert" />
                    </li>
                    <li>
                        <h3 class="list-left">Inhalt</h3>
                        <textarea class="text text1" name="content" disabled="disabled"></textarea>
                    </li>
                </ul>
                <a href="javascript:;" id="btn">Liebe/r, bitte <br />vervollständigen Sie dies</a>
            </div>
        </form>
    </div>
</body>
 
</html>

Nachfolgend finden Sie den wichtigsten oben vorgestellten public.js-Code, der viele nützliche Methoden kapselt.

Funktions-ID(id) {
    gibt document.getElementById(id) zurück;
}
Funktion toBrowser() {
    var Browser = Navigator.AppName;
    var b_version = navigator.appVersion;
    wenn (Browser == "Netscape") {
        gibt true zurück;
    }
    var version = b_version.split(";");
    var trim_Version = version[1].replace(/[ ]/g, "");
 
    if (browser == "Microsoft Internet Explorer" && (trim_Version == "MSIE7.0" || trim_Version == "MSIE6.0" || trim_Version == "MSIE8.0")) {
        gibt false zurück;
    }
    anders {
        gibt true zurück;
    }
}
Funktion starMove(Objekt, Ziel, iType, fnEnd, iDate) {
    wenn (Objekt.Timer) {
        Intervall löschen(Objekt.Timer);
    }
    wenn (iType == 1) {
        var sAttr = "";
        obj.iSpeed = {};
        für (sAttr im Ziel) {
            obj.iSpeed[sAttr] = 0;
        }
    }
    wenn (Ziel["transformieren"]) {
        wenn (Objekt["transformieren"]) {
            Ziel["transformieren"] += Objekt["transformieren"];
        }
        anders {
            css(obj, sAttr, 0);
        }
    }
    Schalter (iType) {
        Fall 0:
            obj.timer = setInterval(Funktion () { doMoveBuffer(Obj, Ziel, fnEnd); }, 24);
            brechen;
        Fall 1:
            obj.timer = setInterval(Funktion () { domoveFlexible(Obj, Ziel, fnEnd); }, 24);
            brechen;
    }
}
Funktion doMoveBuffer(Objekt, Ziel, fnEnd) {
    var sAttr = "";
    var iEnd = 1;
    für (sAttr im Ziel) {
        if (toBrowser() == false && target["transform"]) {
            weitermachen;
        }
        var iNow = parseFloat(css(obj, sAttr));
        wenn (iNow == Ziel[sAttr]) {
            weitermachen;
        }
        anders {
            var iSpeed = (Ziel[sAttr] – iNow)/5;
            iGeschwindigkeit * = 0,75;
            wenn (iSpeed > 0) {
                iSpeed = Math.ceil(iSpeed);
            }
            anders {
                iSpeed = Math.floor(iSpeed);
            }
            css(obj, sAttr, iNow += iSpeed);
            iEnde = 0;
        }
    }
    wenn (iEnde) {
        Intervall löschen(Objekt.Timer);
        wenn (fnEnde) {
            fnEnd.call(obj);
        }
    }
}
 
Funktion domoveFlexible(Objekt, Ziel, fnEnd) {
    var sAttr = "";
    var iEnd = 1;
 
    für (sAttr im Ziel) {
        if (toBrowser() == false && target["transform"]) {
            weitermachen;
        }
        var iNow = parseFloat(css(obj, sAttr));
        obj.iSpeed[sAttr] += (Ziel[sAttr] - iNow) / 5;
        obj.iSpeed[sAttr] *= 0,75;
        wenn (Math.round(iNow) == Ziel[sAttr] && Math.abs(Obj.iSpeed[sAttr]) < 1) {
            weitermachen;
        }
        anders {
            iNow = Math.round(iNow + obj.iSpeed[sAttr]);
            css(obj, sAttr, iNow);
            iEnde = 0;
        }
    }
    wenn (iEnde) {
        Intervall löschen(Objekt.Timer);
        wenn (fnEnde) {
            fnEnd.call(obj);
        }
    }
}
Funktion CSS (Objekt, Attribut, Wert) {
    wenn (Argumente.Länge == 2) {
        wenn (attr == "transformieren") {
            gib obj.transform zurück;
        }
        var i = parseFloat(obj.currentStyle ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj, false)[attr]);
        var val = i? i: 0;
        wenn (attr == "Deckkraft") {
            Wert *= 100;
        }
        Rückgabewert;
    }
    sonst wenn (Argumente.Länge == 3) {
        Schalter (Attr) {
            Fall 'Breite':
            Fall 'Höhe':
            Fall 'paddingLeft':
            Fall 'paddingTop':
            Fall 'paddingRight':
            Fall 'paddingBottom':
                Wert = Math.max(Wert, 0);
            Fall 'links':
            Fall 'oben':
            Fall 'marginLeft':
            Fall 'marginTop':
            Fall 'marginRight':
            Fall 'marginBottom':
                obj.style[attr] = Wert + "px";
                brechen;
            Fall 'Opazität':
                wenn (Wert < 0) {
                    Wert = 0;
                }
                obj.style.filter = "Alpha(Deckkraft:" + Wert + ")";
 
                obj.style.opacity = Wert / 100;
                brechen;
            Fall 'transformieren':
                obj.transform = Wert;
                obj.style["transform"] = "rotieren(" + Wert + "Grad)";
                obj.style["MsTransform"] = "drehen(" + Wert + "Grad)";
                obj.style["MozTransform"] = "drehen(" + Wert + "Grad)";
                obj.style["WebkitTransform"] = "drehen(" + Wert + "Grad)";
                obj.style["OTransform"] = "drehen(" + Wert + "Grad)";
                brechen;
            Standard:
                obj.style[attr] = Wert;
        }
 
        Rückgabefunktion (attr_in, wert_in) { css(obj, attr_in, wert_in) };
    }
}
Funktion getClass(sClass, obj) {
    var aRr = [];
    wenn (Objekt) {
        var aTag = obj.getElementsByTagName('*');
    }
    anders {
        var aTag = document.getElementsByTagName('*');
    }
    für (var i = 0; i < aTag.Länge; i++) {
        var aClass = aTag[i].className.split(" ");
        für (var j = 0; j < aClass.length; j++) {
            wenn (eineKlasse[j] == sKlasse) {
                aRr.push(aTag[i]);
            }
        }
    }
    Rückkehr aRr;
}
Funktion nachClient(Objekt, Attribut) {
    if (attr == "Breite") {
        returniere css(obj, "Rand links") + css(obj, "Rand rechts") + css(obj, "Padding links") + css(obj, "Paddingbreite") + css(obj, "Paddingbreite");
    }
    sonst wenn (attr == "Höhe") {
        return css(obj, "Rand oben") + css(obj, "Rand unten") + css(obj, "Polsterung oben") + css(obj, "Polsterung unten") + css(obj, "Polsterungshöhe");
    }
}

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 realisiert Message Board-Funktion
So verwenden Sie DOM-Operationen, um ein einfaches Message Board in js zu implementieren
Quellcode des JSP-Message Boards drei: für JSP-Anfänger.
JS+CSS simuliert eine Message Board-Instanz, die Inhalte ohne Aktualisierung anzeigen kann
JS realisiert die Message Board-Funktion [Bodeneffektanzeige]
Faltbares Message Board, implementiert durch js (mit Quellcode-Download)
JSP-Message-Board-Quellcode 2: für JSP-Anfänger.
Mein Ajax-Message-Board-Quellcode, gute Anwendung js
Codebeispiel zum Schreiben eines Message Boards mit ReactJS und dem Flask-Framework von Python
Quellcode 1 des JSP-Message Boards: für JSP-Anfänger.

<<: So reparieren Sie beschädigte MySQL-Datenbankdateien schnell mit den Tools myisamchk und mysqlcheck

>>: So implementieren Sie Web-Stresstests mit Apache Bench