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:
|
<<: Softwaretests – MySQL (VI: Datenbankfunktionen)
>>: SpringBoot integriert Activiti7-Implementierungscode
Artikel empfehlen
Einführung in Keyword-Design-Methoden im Webdesign
Häufig ignorieren wir beim Erstellen der Homepage ...
Docker Nginx-Container und Tomcat-Container zur Realisierung von Lastausgleich und dynamischen und statischen Trennungsvorgängen
Tomcat8-Image herunterladen [root@localhost ~]# D...
JavaScript-Singleton-Modus zum Implementieren benutzerdefinierter Popup-Fenster
In diesem Artikel wird der spezifische Code des J...
Integrierte Objekte, Werttypen und Referenztypen in JavaScript-Objekten erklärt
Inhaltsverzeichnis Objekt Objektdefinition Iterie...
CSS zum Ändern der Größe (Breite, Höhe) des Bildes, wenn die Maus über den Bild-Hyperlink fährt
So ändern Sie den Bild-Hyperlink, wenn Sie mit der...
Komprimierungs- und Optimierungsvorgänge für Docker-Images
Der Grund für die heutige Beliebtheit von Docker ...
Detaillierte Erläuterung der MySQL-Benutzervariablen und Set-Anweisungsbeispiele
Inhaltsverzeichnis 1 Einführung in Benutzervariab...
Grafisches Tutorial zur Maven-Installation und -Konfiguration unter Windows (einschließlich lokalisierter Warehouse-Konfiguration)
1. Maven herunterladen Offizielle Maven-Website: ...
JS implementiert einen Stoppuhr-Timer
In diesem Artikelbeispiel wird der spezifische JS...
Master-Slave-Konfiguration für die synchrone Replikation einer MySQL-Datenbank unter Linux
Der Vorteil der Master-Slave-Synchronisierungskon...
Detaillierte Erläuterung der Bereitstellung von MySQL mit Docker (Datenpersistenz)
In diesem Artikel wird kurz beschrieben, wie Sie ...
Detaillierte Analyse des MySQL 8.0-Speicherverbrauchs
Inhaltsverzeichnis 1. innodb_buffer_pool_size 2. ...
Lassen Sie uns über das Problem der Vue-Integration der SweetAlert2-Eingabeaufforderungskomponente sprechen
Inhaltsverzeichnis 1. Projektintegration 1. CDN-I...
Docker-Installations- und Konfigurationsschritte für das Redis-Image
Inhaltsverzeichnis Vorwort Umfeld Installieren Er...
Das Vue-Cropper-Plugin realisiert die Kapselung der Bildaufnahme- und Upload-Komponente
Der spezifische Code zum Einkapseln der Bildaufna...