jQuery erzielt einen Bildlaufwiedergabeeffekt auf großem Bildschirm

In diesem Artikel wird der spezifische Code von jQuery zur Erzielung des Bildlaufeffekts auf großem Bildschirm zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Szenarioanforderungen:

Auf dem großen Bildschirm wird die Nachricht in Echtzeit abgespielt und vor- und zurückgespult.

Code:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <Kopf>
        <title>Benutzerdefinierter Kontrollkästchenstil</title>
        <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1">
        <meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <Stil>
            * {
        Rand: 0;
        Polsterung: 0;
    }
    
    .contScend {
        Breite: 400px;
        Höhe: 200px;
        Hintergrund: #000000;
        Rand: 20px automatisch;
        Überlauf: versteckt;
    }
    
    .contScend ul {
        Listenstil: keiner;
        Breite: 100 %;
        Höhe: 100%;
        Farbe: rot;
        Schriftgröße: 13px;
    }
    
    .contScend ul li {
        Breite: 100 %;
        Höhe: 40px;
        Box-Größe: Rahmenbox;
        Zeilenhöhe: 40px;
        Textausrichtung: zentriert;
    }
 
        </Stil>
    </Kopf>
    <Text>
        <!-- Mittelteil -->
        <div Klasse="Fortsetzung">
 
        </div>
    </body>
    <Skripttyp="text/javascript">
        $.ajax({
            URL: "test.json",
            Typ: 'GET',
            Datentyp: "json",
            Erfolg: Funktion (Daten) {
                var html = "";
                html += "<ul>";
                $.each(Daten, Funktion(i, Element) { //                
                    html += '<li>' + Artikelname + ':' + Artikelnummer + 'Name' + '</li>';
 
                });
                html += '</ul>';
                $(".contScend").html(html);
                scrollen();
            }
        });
 
        Funktion scrollen() {
            //Holen Sie sich das aktuelle <ul>
            var $uList = $(".contScend ul");
            var Timer = null;
            //Berühren, um den Timer zu löschen $uList.hover(function() {
                    Intervall löschen(Timer);
                },
                function() { //Verlassen, um den Timer zu starten timer = setInterval(function() {
                            scrollList($uList);
                        },
                        1000);
                }).trigger("mouseleave"); //Touch-Ereignisse automatisch auslösen //Scroll-Animation function scrollList(obj) {
                //Aktuelle <li>-Höhe abrufen var scrollHeight = $("ul li:first").height();
                //Die Höhe eines <li>$uList.stop().animate({
                        marginTop: -scrollHeight
                    },
                    600,
                    Funktion() {
                        //Nachdem die Animation beendet ist, setzen Sie den aktuellen <ul>marginTop auf den Anfangswert 0 und fügen Sie dann das erste <li> an das Ende an.
                        $uList.css({
                            Rand oben: 0
                        }).find("li:first").appendTo($uList);
                    });
            }
        }
    </Skript>
</html>

test.json

[{
    "Name": "Erlebniszonenstatistik",
    "Nummer": 0
}, {
    "Name": "test909",
    "Nummer": 0
}, {
    "Name": "test910",
    "Nummer": 0
}, {
    "Name": "111",
    "Nummer": 0
}, {
    "Name": "Test",
    "Nummer": 0
}, {
    "Name": "test11111",
    "Nummer": 0
}, {
    "name": "Speicherbereichsstatistiken",
    "Nummer": 0
}]

Die Wirkung ist wie folgt

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:

Code zur Implementierung eines auf jQuery basierenden Musikplayers mit Liedtext-Scrolling
jQuery implementiert den links- und rechtsseitigen Intervall-Scrolleffekt von Bildern (kann automatisch abgespielt werden)
jQuery Fokusbildumschaltung (digitale Markierung/manuell/automatische Wiedergabe/horizontales Scrollen)
jQuery realisiert den Nachrichten-Scroll-Effekt

<<: Softwaretests – MySQL (VI: Datenbankfunktionen)

>>: SpringBoot integriert Activiti7-Implementierungscode