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:
|
<<: Detaillierte Analyse von MySQL-Datenbanktransaktionen und -Sperren
>>: Bietet hilfreiche Vorschläge zur Verbesserung des Website-Designs
Artikel empfehlen
Detailliertes Beispiel für eine Remote-Verbindung zu Docker mithilfe einer TLS-verschlüsselten Kommunikation
Standardmäßig läuft Docker über einen nicht verne...
Eine kurze Erläuterung zu Leerzeichen und Leerzeilen im HTML-Code
Alle aufeinanderfolgenden Leerzeichen oder Leerze...
So ändern Sie den Standardspeicherort von Docker-Images (Lösung)
Aufgrund der anfänglichen Partitionierung des Sys...
Eine Sammlung von Button-Hover-Rand- und Hintergrundanimationen basierend auf CSS-Eigenschaften
Herzattribute opacity: .999 erstellt einen Stapel...
Anwendungsszenarien und Entwurfsmethoden für MySQL-Tabellen- und Datenbank-Sharding
Viele Freunde haben in Foren und Nachrichtenberei...
Zusammenfassung der für die Front-End-Entwicklung erforderlichen allgemeinen Toolfunktionen
1. Zeitformatierung und andere Methoden Es wird e...
Detaillierte Erläuterung der Live-Übertragungsfunktion von Vue
Vor kurzem hat das Unternehmen zufällig Live-Über...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.23 unter Win10
In diesem Artikel wird die Installations- und Kon...
Zusammenfassung von 11 erstaunlichen Best Practices für die Refaktorierung von JavaScript-Code
Inhaltsverzeichnis 1. Extrahieren von Funktionen ...
Zusammenfassung der wichtigsten Docker-Befehle für Entwickler
Inhaltsverzeichnis Einführung in Docker Installat...
Zusammenfassung der Vue Watch-Überwachungsmethoden
Inhaltsverzeichnis 1. Die Rolle der Uhr in Vue is...
So steuern Sie den Anteil untergeordneter Flex-Elemente auf der Hauptachse
Hintergrund Durch das flexible Layout wird eine e...
Detaillierte Erklärung des Rewrite-Moduls von Nginx
Das Umschreibmodul ist das Modul ngx_http_rewrite...
Detaillierte Erläuterung der Docker Fast Build- und Alibaba Cloud-Containerbeschleunigungskonfiguration in der Windows 7-Umgebung
Im vorherigen Artikel zu Docker wurde die Konstru...
So erhalten Sie ein dauerhaftes kostenloses SSL-Zertifikat von Let’s Encrypt in Docker
1. Ursache Der offizielle Cerbot ist zu nervig. E...