HTML+CSS+JavaScript zum Erreichen eines Beispielcodes für das Scrollen in einer Listenschleife

HTML+CSS+JavaScript zum Erreichen eines Beispielcodes für das Scrollen in einer Listenschleife
Beschreibung: Stellen Sie einen Timer ein, um den Inhalt des vorherigen Knotens innerhalb der angegebenen Zeit zu ersetzen.
1. Schlüsselcode: Javascript:

Code kopieren
Der Code lautet wie folgt:

<Skripttyp="text/javascript">
var dome = document.getElementById ("dome"); //Holen Sie sich den Knoten
var Kuppel1 = document.getElementById("Kuppel1");
var dome2 = document.getElementById("dome2");
var speed=50; //Stellt die Geschwindigkeit der Aufwärtsrotation ein
dome2.innerHTML=dome1.innerHTML; //Knotenschlüsselanweisungen kopieren
Funktion moveTop(){
if(dome1.offsetHeight-dome.scrollTop<=0){//Beurteilen Sie, ob der Inhalt zum ersten Mal durchlaufen wurde
Kuppel.scrollTop=0;
}anders{
dome.scrollTop++; //Sonst nach oben verschieben
}
}
var myFunction=setInterval("moveTop()",speed);//Timer einstellen
dome.onmouseover=function(){//Maus stoppt, wenn sie im Bereich platziert wird
clearInterval(meineFunktion);
}
Kuppel.onmouseout=Funktion(){
meineFunktion=setInterval(moveTop,speed);
}
</Skript>

2. Codebeispiel: vollständiger Code (ausführbar)

Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Kreisförmiger Scroll-Informationsbalken</title>
<style type="text/css">
Körper{
Rand: 0px;
Polsterung: 0px;
}
#express li{
Höhe: 25px;
Rahmen unten: gestrichelt 1px #999;
Zeilenhöhe: 20px;
Schriftgröße: 12px;
Listenstil: keiner;
}
#Kuppel{
Höhe: 305px;
Überlauf: versteckt;
Rand oben: 0px;
}
#Buchklasse{
Breite: 200px;
Höhe: 310px;
Rand: 3px durchgezogen #999;
Rand links: automatisch;
Rand rechts: automatisch;
Rand oben: 70px;
Rahmenradius: 5px 5px 5px 5px;
Boxschatten: 0px 0px 10px 10px #CECED1;
}
#äußern{
Rand links: -30px;
Rand rechts: 10px;
Rand unten: 0px;
Rand oben: 0px;
}
#Buchklasse div div ul li a{
Textdekoration: keine;
Farbe: #333333;
}
#Buchklasse div div ul li a:hover{
Textdekoration: Unterstreichen;
}
</Stil>
</Kopf>
<Text>
<div id="Buchklasse">
<div id="Kuppel">
<div id="Kuppel1">
<ul id="express">
<li><a href="#">·Lehrplan für Englisch als Aufbaustudium 2010 mit 25 % Rabatt eingetroffen...</a></li>
<li><a href="#">·Autoritative Version der Vier großen Klassiker (Volksliteratur...</a></li>
<li><a href="#">·Herr Tang Degang, eine Autorität auf dem Gebiet der mündlichen Überlieferung ...</a></li>
<li><a href="#">·Yuan Weimin und die Sportwelt: Die Wahrheit sagen...</a></li>
<li><a href="#">·Wir in Taiwan haben in den letzten Jahren auf beiden Seiten der Taiwanstraße für Aufsehen gesorgt...</a></li>
<li><a href="#">· Empfohlene Bestseller-Lehrmittel: 50 Sätze exquisiter Bücher...</a></li>
<li><a href="#">·Ausgabe 2010 des gemeinsamen Prüfungsschemas für den Master of Laws 75...</a></li>
<li><a href="#">· 25 % Rabatt auf neue und meistverkaufte Computerbücher</a></li>
<li><a href="#">·Die beliebtesten Kinderbücher 2009</a></li>
<li><a href="#">·59 % Rabatt auf ausgewählte Werke von Freud</a></li>
<!---------Kopieren Sie einfach das <li>-Tag mehr------Mehr werde ich hier nicht schreiben---------->
</div>
<div id="Kuppel2"></div>
</div>
</div>
<!----------Um zu verhindern, dass HTML vollständig geladen wird, schreiben Sie den folgenden Javascript-Code---------->
<Skripttyp="text/javascript">
var Kuppel = document.getElementById("Kuppel");
var Kuppel1 = document.getElementById("Kuppel1");
var dome2 = document.getElementById("dome2");
var speed=50; //Stellt die Geschwindigkeit der Aufwärtsrotation ein
dome2.innerHTML=dome1.innerHTML; //Knoten kopieren
Funktion moveTop(){
wenn(Kuppel1.OffsetHeight-Kuppel.ScrollTop<=0){
Kuppel.scrollTop=0;
}anders{
Kuppel.scrollTop++;
}
}
var meineFunktion = setInterval("moveTop()",Geschwindigkeit);
Kuppel.onmouseover=Funktion(){
clearInterval(meineFunktion);
}
Kuppel.onmouseout=Funktion(){
meineFunktion=setInterval(moveTop,speed);
}
</Skript>
</body>
</html>

3. Die Schnittstelle ist wie folgt:

<<:  Die IE-Umgebung schreibt vor, dass die Div-Höhe größer sein muss als die Schrifthöhe

>>:  HTML+CSS+JavaScript zum Erstellen eines einfachen Tic-Tac-Toe-Spiels

Artikel empfehlen

Super einfache Implementierung von Docker zum Erstellen eines persönlichen Blogsystems

Docker installieren Aktualisieren Sie das Yum-Pak...

Ändern Sie die Standardfarbe des Platzhaltertexts im Eingabefeld - Methode „webkit-input-placeholder“

HTML5 fügt ein natives Platzhalterattribut für di...

Drücken Sie die Eingabetaste, um das Formular automatisch abzuschicken. Unerwartete Entdeckung

Code kopieren Der Code lautet wie folgt: <!DOC...

So öffnen Sie ein temporäres QQ-Dialogfeld, um online zu chatten, ohne Freunde hinzuzufügen

Eigentlich ist das ganz einfach. Wir fügen ein a-...

Designbeispiele für Dropdown-Menüs und Schiebemenüs

Ich habe viele Websites gefunden, die Dropdown- od...

Kommunikation zwischen übergeordneten und untergeordneten Komponenten in Vue und Verwendung von Sync zum Synchronisieren der Daten übergeordneter und untergeordneter Komponenten

Inhaltsverzeichnis Vorwort Untergeordnete Kompone...

5 äußerst nützliche Open-Source-Docker-Tools, die dringend empfohlen werden

Einführung Die Docker-Community hat viele Open-So...

Detaillierte Analyse der MySQL-Optimierung von like und = Leistung

Einführung Die meisten Leute, die schon einmal Da...

Gerätetreiber des Linux-Kernels – Zusammenfassung der grundlegenden Hinweise zum Linux-Kernel

1. Mechanismus des Linux-Kernel-Treibermoduls Sta...

Zusammenfassung der Tipps zum Festlegen der maximalen Anzahl von Verbindungen in MySQL

Methode 1: Befehlszeilenänderung Wir müssen nur d...

Über die Kontrolle und Verschönerung von Eingabedateien

Beim Hochladen auf einigen Websites wird nach dem...

Die Einhandregel von WEB 2.0

<br />Mein vorheriger Artikel über CSS wurde...

Docker erstellt die Codeerkennungsplattform SonarQube und erkennt den Prozess von Maven-Projekten

1 Einleitung Ein guter Programmierer sollte über ...

SQL-Anweisungen in MySQL verwenden keine Indizes

MySQL-Abfrage ohne Verwendung der Indexaggregatio...

Detailliertes Tutorial zum Kompilieren und Installieren von mysql8.0.29 in der LNMP-Umgebung von CentOS8

1. Voraussetzungen Da ich es schon mehrmals insta...