Natives JS zum Erzielen von Jalousie-Spezialeffekten

In diesem Artikel wird ein Jalousie-Spezialeffekt beschrieben, der mit nativem JS implementiert wurde. Der Effekt ist wie folgt:

Die Codeimplementierung ist wie folgt, Sie können sie gerne kopieren und einfügen.

<!DOCTYPE html>
<html>
 
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
    <title>Natives JS zum Erzielen von Jalousie-Spezialeffekten</title>
    <Stil>
        * {
            Rand: 0;
            Polsterung: 0;
        }
 
        li {
            Listenstil: keiner;
        }
 
        A {
            Textdekoration: keine;
        }
 
        #Kasten {
            Breite: 562px;
            Polsterung: 10px 24px 20px;
            Hintergrund: #EACFCF;
            Überlauf: versteckt;
            Rand: 20px auto 0;
        }
 
        .links {
            Breite: 266px;
            schweben: links;
        }
 
        .Rechts {
            Breite: 266px;
            schweben: rechts;
        }
 
        #box h2 {
            Höhe: 38px;
            Rahmen unten: 1px durchgezogen #D2A1A1;
            Polsterung links: 20px;
        }
 
        #box h2 stark {
            schweben: links;
            Zeilenhöhe: 38px;
            Farbe: #885050;
            Schriftstärke: normal;
        }
 
        #box h2 a {
            schweben: rechts;
            Breite: 52px;
            Höhe: 14px;
            Schriftgröße: 12px;
            Texteinzug: 10px;
            Farbe: #fff;
            Zeilenhöhe: 12px;
            Schriftstärke: normal;
            Rand oben: 10px;
        }
 
        #box li {
            Höhe: 30px;
            Position: relativ;
            Rahmen unten: 1px gestrichelt #D1A1A1;
        }
 
        #box li div,
        #Boxlippe {
            Höhe: 30px;
            Position: absolut;
            oben: 0;
            links: 0;
            Breite: 100 %;
        }
 
        #Boxlippe {
            Hintergrund: #fff;
            Deckkraft: 0;
            Filter: Alpha (Deckkraft = 0);
        }
 
        #box li div a,
        #box li div span {
            Zeilenhöhe: 30px;
            Schriftgröße: 12px;
            Höhe: 30px;
        }
 
        #box li div a {
            schweben: links;
            Polsterung links: 20px;
            Farbe: #7F5454;
            Breite: 172px;
            Überlauf: versteckt;
        }
 
        #box li div span {
            Polsterung rechts: 10px;
            schweben: rechts;
            Farbe: #CF9494;
        }
    </Stil>
    <Skripttyp="text/javascript">
        fenster.onload = Funktion () {
            var oBox = document.getElementById("box");
            var aLi = document.getElementsByTagName('li');
            var i = 0;
            für (i = 0; i < aLi.Länge; i++) {
                var oP = aLi[i].getElementsByTagName('p')[0];
                oP.iAlpha = 0;
                oP.Zeit = null;
                aLi[i].onmouseover = Funktion () {
                    var oP = this.getElementsByTagName('p')[0];
                    oP.time ? clearInterval(oP.time) : "";
                    oP.style.opacity = 1;
                    oP.style.filter = "Alpha(Deckkraft=100)";
                    oP.iAlpha = 100;
                }
                aLi[i].onmouseout = Funktion () {
                    Sternbewegung(this.getElementsByTagName('p')[0]);
                };
            }
        };
        Funktion starmove(obj) {
            obj.time ? clearInterval(obj.time) : "";
            obj.Zeit = Intervall festlegen(Funktion () { domove(obj); }, 14);
        }
        Funktion domove(Objekt) {
            var iSpeed = 5;
            wenn (Objekt.iAlpha <= iSpeed) {
                Intervall löschen(Objekt.Zeit);
                obj.iAlpha = 0;
                obj.zeit = null;
            } anders {
                obj.iAlpha -= iSpeed;
            }
            obj.style.opacity = obj.iAlpha / 100;
            obj.style.filter = "alpha(opacity=" + obj.iAlpha + ")";
        }
    </Skript>
</Kopf>
 
<Text>
    <div id="box">
        <div Klasse="links">
            <h2>
                <strong>Aktuelle Nachrichten</strong>
                <a>mehr</a>
            </h2>
            <ul>
                <li>
                    <p></p>
                    <div>
                        <a>Häufig gestellte Fragen zum Kurs</a>
                        <span>20110329</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Kriterien für den Abschluss des JS-Kurses</a>
                        <span>20110327</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Webeffekt-Sammlung (täglich aktualisiert)</a>
                        <span>20110322</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Unterrichtsort</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Späteste Startzeit des CSS-Kurses</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Neuester Startzeitpunkt des JavaScript-Kurses</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Webdesign-Grundkurs</a>
                        <span>20110319</span>
                    </div>
                </li>
            </ul>
        </div>
        <div Klasse="rechts">
            <h2>
                <strong>Was ist neu</strong>
                <a>mehr</a>
            </h2>
            <ul>
                <li>
                    <p></p>
                    <div>
                        <a>3D-sphärischer Tag-Cloud-Effekt, implementiert durch JavaScript</a>
                        <span>20110329</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Live-Aufzeichnung des JavaScript-Meetups vom Samstag</a>
                        <span>20110327</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Fragen zum Ali-Frontend-Interview</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Kurze Analyse der Implementierungsprinzipien des Google Maps-Frontends (Teil 1)</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Hausaufgabenübung zum Windows-Rechner (vereinfachte Version)</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>Akkordeon-Lockerungseffekt</a>
                        <span>20110319</span>
                    </div>
                </li>
                <li>
                    <p></p>
                    <div>
                        <a>3D-sphärischer Tag-Cloud-Effekt, implementiert durch JavaScript</a>
                        <span>20110319</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
 
</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 die Bibliothek move.js, um den Shutter-Effekt zu realisieren
JS implementiert einen ähnlichen Effekt wie das Dropdown-Menü für Jalousien
Einführung in die Wirkung und das Prinzip von Jalousien, die durch native js realisiert werden
Die Implementierung von Jalousieanimationen auf Basis von JavaScript ist nicht nur eine Frage von Flas
js realisiert den grün-weißen vertikalen Web-Jalousien-Animations-Umschalteffekt
js-Methode zum Erzielen eines horizontalen Jalousieeffekts und eines Animationseffekts zum Umschalten von Webseiten
JS realisiert den Effekt von Web-Shuttern

<<: Tutorial zur HTML-Tabellenauszeichnung (5): Farbattribut für helle Rahmen BORDERCOLORLIGHT

>>: Detaillierte Erklärung zur Abfrage von Feldern, die „%“ enthalten, in MySQL (ESCAPE-Verwendung)