Natives JS zum Erzielen von Verzeichnis-Scrolleffekten

Hier ist ein Text-Scrolling-Effekt, der mit nativem JS implementiert wurde. Dieser Effekt wird normalerweise verwendet, um einige lokale Informationen auf Webseiten anzuzeigen, z. B. Nachrichten, Dynamiken, Aufladedatensätze usw. Der Effekt ist wie folgt:

Der Implementierungscode lautet wie folgt:

<!DOCTYPE html>
<html>
 
<Kopf>
    <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
    <title>Natives JS zum Erzielen von Verzeichnis-Scrolleffekten</title>
    <Stil>
        Körper {
            Schriftgröße: 12px;
            Zeilenhöhe: 24px;
            Textausrichtung: zentriert;
        }
 
        * {
            Rand: 0px;
            Polsterung: 0px;
        }
 
        ul {
            Listenstil: keiner;
        }
 
        ein Bild {
            Rand: keiner;
        }
 
        A {
            Farbe: #333;
            Textdekoration: keine;
        }
 
        ein:schweben {
            Farbe: #ff0000;
        }
 
        #mooc {
            Breite: 399px;
            Rand: 5px durchgezogen #ababab;
            -moz-Randradius: 15px;
            -Webkit-Randradius: 15px;
            Rahmenradius: 15px;
            Kastenschatten: 2px 2px 10px #ababab;
            Rand: 50px auto 0;
            Textausrichtung: links;
        }
 
        #moocTitel {
            Höhe: 62px;
            Überlauf: versteckt;
            Schriftgröße: 26px;
            Zeilenhöhe: 62px;
            Polsterung links: 30px;
            /* Feuerfuchs */
            Hintergrundbild: -moz-linear-gradient(oben, #f05e6f, #c9394a);
            /* Saf4+, Chrome */
            Hintergrundbild: -webkit-gradient(linear, links oben, links unten, Farbstopp(0, #f05e6f), Farbstopp(1, #c9394a));
            /* IE*/
            Filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0');
            Rand: 1px durchgezogen ##f05e6f;
            /* Gecko-Browser */
            -moz-border-radius: 8px 8px 0 0;
            /* Webkit-Browser */
            -webkit-border-radius: 8px 8px 0 0;
            Rahmenradius: 8px 8px 0 0;
            Farbe: #fff;
            Position: relativ;
        }
 
        #moocTitel a {
            Position: absolut;
            rechts: 10px;
            unten: 10px;
            Anzeige: inline;
            Farbe: #fff;
            Schriftgröße: 12px;
            Zeilenhöhe: 24px;
        }
 
        #moocBot {
            Breite: 399px;
            Höhe: 10px;
            Überlauf: versteckt;
        }
 
        #moocBox {
            Höhe: 144px;
            Breite: 335px;
            Rand links: 25px;
            Rand oben: 10px;
            Überlauf: versteckt;
        }
 
        #mooc ul li {
            Höhe: 24px;
        }
 
        #mooc ul li a {
            Breite: 180px;
            schweben: links;
            Anzeige: Block;
            Überlauf: versteckt;
            Texteinzug: 15px;
            Höhe: 24px;
        }
 
        #mooc ul li span {
            schweben: rechts;
            Farbe: #999;
        }
    </Stil>
</Kopf>
 
<Text>
    <div id="mooc">
        <h3 id="moocTitel">
            Neueste Kurse<a href="#" target="_self">Mehr>></a>
        </h3>
 
        <div id="moocBox">
            <ul id="con1">
                <li>
                    <a href="#" >1. Gegenangriff des absoluten Verlierers</a>
                    <span>18.09.2013</span>
                </li>
                <li>
                    <a href="#" >2. Effekt des Seitenwechsels auf der Registerkarte</a>
                    <span>09.10.2013</span>
                </li>
                <li>
                    <a href="#" >3. Abgerundete Kristallknöpfe herstellen</a>
                    <span>21.10.2013</span>
                </li>
                <li>
                    <a href="#" >4. HTML+CSS-Grundkurs</a>
                    <span>01.11.2013</span>
                </li>
                <li>
                    <a href="#" >5. Seitenzahlen erstellen</a>
                    <span>06.11.2013</span>
                </li>
                <li>
                    <a href="#" >6. Ein Navigationsmenü erstellen</a>
                    <span>08.11.2013</span>
                </li>
                <li>
                    <a href="#" >7. Erstellung einer Informationsliste</a>
                    <span>15.11.2013</span>
                </li>
                <li>
                    <a href="#" >8. Erstellen Sie ein Dropdown-Menü</a>
                    <span>22.11.2013</span>
                </li>
                <li>
                    <a href="#" >9. So erzielen Sie den „Newbie Guide“-Effekt</a>
                    <span>06.12.2013</span>
                </li>
            </ul>
            <ul id="con2"></ul>
        </div>
    </div>
    <Skripttyp="text/javascript">
        //Den Scroll-Listencontainer abrufen var area = document.getElementById('moocBox');
        //Liste 1 abrufen
        var con1 = document.getElementById('con1');
        //Holen Sie sich eine leere Liste 2
        var con2 = document.getElementById('con2');
        //Zeitintervall für die Timer-Ausführung einstellen var speed = 50;
 
        //Setze die Variable zum Scrollen nach oben. area.scrollTop = 0;
 
        //Kopiere den Inhalt von Liste 1 in Liste 2
        con2.innerHTML = con1.innerHTML;
 
        //Nach oben scrollen Funktion function scrollUp() {
            //Wenn die Scrollhöhe der Scrollliste größer oder gleich der Höhe der Liste selbst ist, if (area.scrollTop >= con1.scrollHeight) {
                //Setze die Scrollhöhe der Liste auf Null zurück und beginne erneut mit dem Scrollen area.scrollTop = 0;
                //sonst} sonst {
                //Weiter scrollen area.scrollTop++;
            }
        }
 
        //Timer speichern var myScroll = setInterval("scrollUp()", speed);
 
        //Wenn die Maus hineinbewegt wird, lösche den Timerbereich.onmouseover = function () {
            löschenInterval(meinScroll);
        }
        //Wenn die Maus weggeht, starte den Timer area.onmouseout = function () {
            myScroll = setInterval("scrollUp()", Geschwindigkeit);
        }
    </Skript>
</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:

js/jquery erhält den Implementierungscode für die Höhe und Breite des sichtbaren Bereichs des Browserfensters sowie die Höhe der Bildlaufleiste
JS-Code zur Bestimmung der Unterseite der Bildlaufleiste
JS realisiert horizontales, unterbrechungsfreies Scrollen von Text
Beispiel für ein JS-Operations-Scrollbar-Ereignis
Verstehen Sie den nahtlosen Scroll-Code von JS gründlich
js-Methode zum Ermitteln der Scroll-Distanz
Wenn die Bildlaufleiste zum unteren Seitenende scrollt, wird der JS-Code zum automatischen Hinzufügen von Inhalten geladen
Eine kurze Analyse des JS-Text-Scrolling-Effekts
js ermittelt, ob die Scrollleiste den unteren oder oberen Rand der Seite erreicht hat
js implementiert eine Bildlaufleiste, um zum unteren Rand der Seite zu scrollen und mit dem Laden fortzufahren

<<: Detaillierte Analyse von MySQL-Datenbanktransaktionen und -Sperren

>>: Bietet hilfreiche Vorschläge zur Verbesserung des Website-Designs