Natives JS zum Erzielen von Laufschrifteffekten

Heute werde ich Ihnen einen Laufschrifteffekt zeigen, der mit nativem JS implementiert wurde. Der Effekt ist wie folgt:

Der implementierte Code ist 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 zum Erzielen eines Laufschrifteffekts</title>
 
    <style type="text/css">
        * {
            Polsterung: 0;
            Rand: 0;
        }
 
        li {
            Listenstil: keiner;
        }
 
        img {
            Rand: keiner;
        }
 
        Körper {
            Hintergrund: #eee;
        }
 
        .Folienmodul {
            Breite: 120px;
            Höhe: 400px;
            Rand: 0 automatisch;
            Hintergrund: #fff;
            Rand: 1px durchgezogen #ccc;
            Position: relativ;
            oben: 50px;
        }
 
        .Schiebemodul .nach oben {
            Breite: 27px;
            Höhe: 27px;
            /* Aufwärtspfeil */
            Hintergrund: URL (Bilder/0.gif) keine Wiederholung;
            Position: absolut;
            oben: 4px;
            links: 50%;
            Rand links: -16px;
            Cursor: Zeiger;
            Filter: Alpha (Deckkraft = 60);
            Deckkraft: 0,6;
        }
 
        .Schiebemodul .nach unten {
            Breite: 27px;
            Höhe: 27px;
            /* Pfeil nach unten */
            Hintergrund: URL (Bilder/5.gif) keine Wiederholung;
            Position: absolut;
            unten: 4px;
            links: 50%;
            Rand links: -16px;
            Cursor: Zeiger;
            Filter: Alpha (Deckkraft = 60);
            Deckkraft: 0,6;
        }
 
        .Schiebemodul .wrap {
            Breite: 120px;
            Höhe: 330px;
            Position: absolut;
            oben: 35px;
            links: 0;
            Überlauf: versteckt;
        }
 
        .Folienmodul ul {
            Breite: 120px;
            Position: absolut;
            oben: 0;
            links: 0;
        }
 
        .slide-module li {
            Breite: 120px;
            Höhe: 110px;
            schweben: links;
        }
 
        .slide-module ein {
            Anzeige: Block;
            Breite: 100px;
            Höhe: 100px;
            Rand: 1px durchgehend rot;
            Rand: 0 automatisch;
            Position: relativ;
            oben: 4px;
        }
 
        .slide-module a:hover {
            Rand: 1px durchgezogen #333;
        }
 
        .Schiebemodul .aktiv {
            Rand: 10px durchgezogen #000;
        }
    </Stil>
    <Skripttyp="text/javascript">
 
        fenster.onload = Funktion () {
            miaovSlide('miaovSlide');
        };
 
        Funktion miaovSlide(o) {
            //Den Operationsobjektcontainer abrufen var obj = document.getElementById(o);
            wenn (!obj) zurückgeben;
            //Alle Divs unter dem Objekt abrufen
            var aDiv = obj.getElementsByTagName('div');
            //Den Aufwärtspfeil abrufen var oUp = getClass('up');
            //Den Abwärtspfeil abrufen var oDown = getClass('down');
            //Bildcontainer abrufen var oWrap = getClass('wrap');
            //Bilderliste abrufen var oUl = oWrap.getElementsByTagName('ul')[0];
            //Bildlistenelement abrufen var oLi = oUl.getElementsByTagName('li');
 
            var oTime = null;
            var iMs = 30;
            var i = 0;
            var iNum = 5;
            var umschalten = -1;
 
            oUl.innerHTML += oUl.innerHTML;
 
            // Wenn du nach oben klickst, gehe nach oben oUp.onclick = function () {
 
                Umschalten = -1;
 
                autoPlay(Umschalten);
            };
 
            // Beim Klicken nach unten vorwärts gehen oDown.onclick = function () {
                Umschalten = 1;
                autoPlay(Umschalten);
            };
 
            // Wenn die Auf- und Abwärtspfeile bewegt werden, ändern Sie ihre Transparenz auf 1
            oUp.onmouseover = oDown.onmouseover = Funktion () {
                dieser.Stil.Filter = 'Alpha(Deckkraft:100)';
                dieser.Stil.Opazität = 1;
            };
 
            // Wenn sich die Auf- und Ab-Pfeile bewegen, ändern Sie ihre Transparenz auf 0,6
            oUp.onmouseout = oDown.onmouseout = Funktion () {
                dieser.Stil.Filter = 'Alpha(Deckkraft:60)';
                dieser.Stil.Opazität = 0,6;
            };
 
            // Bildbewegungsmethode, Umschalten stellt den Abwärts- oder Aufwärtswert dar Funktion autoPlay(umschalten) {
                // Lösche den ursprünglichen Timer, wenn (oTime) {
                    löschenIntervall(oTime);
                }
                //Starte den Timer neu oTime = setInterval(function () {
                    // Das zweite Inkrement iNum += 2 * toggle;
                    // UL geht runter, wenn der obere Wert größer als 0 ist if (iNum > 0) {
                        //Setze den oberen Wert auf die Hälfte der negativen UL-Höhe (hochziehen)
                        iNum = -oLi.Länge * oLi[0].OffsetHeight / 2;
                    }
                    // UL geht nach oben, wenn der Absolutwert des oberen Wertes größer ist als die Hälfte der eigenen Breite von UL if (Math.abs(iNum) > oLi.length * oLi[0].offsetHeight / 2) {
                        // Den oberen Wert auf 0 setzen (nach unten ziehen)
                        iZahl = 0;
                    }
                    // Dem obersten Wert zuweisen oUl.style.top = iNum + 'px';
 
                }, iMs);
            };
 
            autoPlay(Umschalten);
 
            // Hol das Element mit dem aktuellen Stil function getClass(sName) {
                für (i = 0; i < aDiv.Länge; i++) {
                    wenn (aDiv[i].className == sName) {
                        gib ein Div[i] zurück;
                    }
                }
            }
        }
 
    </Skript>
</Kopf>
 
<Text>
 
    <div Klasse="Folienmodul" id="miaovSlide">
        <!-- Aufwärtspfeil -->
        <div Klasse="nach oben"></div>
        <div Klasse="wrap">
            <ul>
                <li>
                    <ein>
                        <img src="bilder/1.jpg" />
                    </a>
                </li>
                <li>
                    <ein>
                        <img src="bilder/2.jpg" />
                    </a>
                </li>
                <li>
                    <ein>
                        <img src="bilder/3.jpg" />
                    </a>
                </li>
                <li>
                    <ein>
                        <img src="bilder/4.jpg" />
                    </a>
                </li>
            </ul>
        </div>
        <!-- Pfeil nach unten -->
        <div Klasse="nach unten"></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:

Natives JS zum Erzielen des Laufschrifteffekts
js, um einen Text-Laufschrift-Effekt zu erzielen
js-Marquee-Code (selbst geschrieben)
Javascript-Einzelzeilentext, der im Lauftext nach oben scrollt
JS-Code zum Implementieren des Laufschrifttexteffekts in der Statusleiste
Ein einfaches Beispiel für die Implementierung eines Laufschrifteffekts mit Javascript
Code-Sharing für den Effekt „Verschiebbares Laufschrift-Textfeld“ von js
Implementierungscode für den JavaScript-Marquee-Hover-Zoom-Effekt
Beispiel eines Laufschrifteffekts basierend auf dem Plugin Marquee.js
JavaScript-Marquee-Lotteriebeispiel

<<: Tutorial zu HTML-Tabellen-Tags (3): Breiten- und Höhenattribute WIDTH, HEIGHT

>>: Implementierung einer Fuzzy-Abfrage wie %% in MySQL