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
Verwenden Sie Visual Studio Code, um eine Verbindung zur MySql-Datenbank herzustellen und Abfragen durchzuführen
Visual Studio Code ist ein leistungsstarker Texte...
MySQL-Implementierung für pessimistisches und optimistisches Sperren
Inhaltsverzeichnis Vorwort Tatsächlicher Kampf 1....
Implementierung von TypeScript im React-Projekt
Inhaltsverzeichnis 1. Einleitung 2. Nutzung Zusta...
Detaillierte Erläuterung der Wiederverwendung und Erweiterung von Vue-Komponenten
Inhaltsverzeichnis Überblick Ist die Erweiterung ...
Analysieren Sie, wie Sie automatisch Vue-Komponentendokumentation generieren
Inhaltsverzeichnis 1. Aktuelle Situation 2. Commu...
Beheben Sie den Fehler bei der Installation von VMware Tools unter Ubuntu 18.04
1. Laut dem Online-Tutorial schlägt die Installat...
Kostenlose MySQL-Installationsversion (zip) – ausführliches Tutorial zur Installation und Konfiguration
In diesem Artikel finden Sie das Installations- u...
Detaillierte Erklärung der gemischten Vererbung in Vue
Inhaltsverzeichnis Die Auswirkungen der gemischte...
JavaScript-Wissen: Konstruktoren sind auch Funktionen
Inhaltsverzeichnis 1. Definition und Aufruf des K...
Kompatibilitätsprobleme mit CSS3-Farbverlaufshintergründen
Wenn wir eine Hintergrundfarbe mit Farbverlauf er...
100-1% des Inhalts der Website ist Navigation
Website, (100-1)% des Inhalts ist Navigation 1. J...
Implementierung der HTML-Befehlszeilenschnittstelle
HTML-Teil Code kopieren Der Code lautet wie folgt:...
Problem mit dem Timeout der Zookeeper-Anforderung in Dubbo: Konfiguration der Verbindung von Mybatis+Spring mit MySQL8.0.15
Ich werde in diesen zwei Tagen Java wiederholen, ...
CSS-Pickup-Pfeile, Kataloge, Icons Implementierungscode
1. Verschiedene CSS-Symbole Es gibt drei Möglichk...
Detaillierte Schritte zur Installation und Konfiguration von MySQL 8.0 auf CentOS
Vorwort Hier sind die Schritte zur Installation u...