Natives JS zum Erzielen von Laufschrifteffekten
|
Heute werde ich Ihnen einen Laufschrifteffekt zeigen, der mit nativem JS implementiert wurde. Der Effekt ist wie folgt:
Der implementierte Code ist wie folgt, Sie können ihn gerne kopieren und einfügen.
<!DOCTYPE html>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Natives JS zum Erzielen eines Laufschrifteffekts</title>
<style type="text/css">
* {
Polsterung: 0;
Rand: 0;
}
li {
Listenstil: keiner;
}
img {
Rand: keiner;
}
Körper {
Hintergrund: #eee;
}
.Folienmodul {
Breite: 120px;
Höhe: 400px;
Rand: 0 automatisch;
Hintergrund: #fff;
Rand: 1px durchgezogen #ccc;
Position: relativ;
oben: 50px;
}
.Schiebemodul .nach oben {
Breite: 27px;
Höhe: 27px;
/* Aufwärtspfeil */
Hintergrund: URL (Bilder/0.gif) keine Wiederholung;
Position: absolut;
oben: 4px;
links: 50%;
Rand links: -16px;
Cursor: Zeiger;
Filter: Alpha (Deckkraft = 60);
Deckkraft: 0,6;
}
.Schiebemodul .nach unten {
Breite: 27px;
Höhe: 27px;
/* Pfeil nach unten */
Hintergrund: URL (Bilder/5.gif) keine Wiederholung;
Position: absolut;
unten: 4px;
links: 50%;
Rand links: -16px;
Cursor: Zeiger;
Filter: Alpha (Deckkraft = 60);
Deckkraft: 0,6;
}
.Schiebemodul .wrap {
Breite: 120px;
Höhe: 330px;
Position: absolut;
oben: 35px;
links: 0;
Überlauf: versteckt;
}
.Folienmodul ul {
Breite: 120px;
Position: absolut;
oben: 0;
links: 0;
}
.slide-module li {
Breite: 120px;
Höhe: 110px;
schweben: links;
}
.slide-module ein {
Anzeige: Block;
Breite: 100px;
Höhe: 100px;
Rand: 1px durchgehend rot;
Rand: 0 automatisch;
Position: relativ;
oben: 4px;
}
.slide-module a:hover {
Rand: 1px durchgezogen #333;
}
.Schiebemodul .aktiv {
Rand: 10px durchgezogen #000;
}
</Stil>
<Skripttyp="text/javascript">
fenster.onload = Funktion () {
miaovSlide('miaovSlide');
};
Funktion miaovSlide(o) {
//Den Operationsobjektcontainer abrufen var obj = document.getElementById(o);
wenn (!obj) zurückgeben;
//Alle Divs unter dem Objekt abrufen
var aDiv = obj.getElementsByTagName('div');
//Den Aufwärtspfeil abrufen var oUp = getClass('up');
//Den Abwärtspfeil abrufen var oDown = getClass('down');
//Bildcontainer abrufen var oWrap = getClass('wrap');
//Bilderliste abrufen var oUl = oWrap.getElementsByTagName('ul')[0];
//Bildlistenelement abrufen var oLi = oUl.getElementsByTagName('li');
var oTime = null;
var iMs = 30;
var i = 0;
var iNum = 5;
var umschalten = -1;
oUl.innerHTML += oUl.innerHTML;
// Wenn du nach oben klickst, gehe nach oben oUp.onclick = function () {
Umschalten = -1;
autoPlay(Umschalten);
};
// Beim Klicken nach unten vorwärts gehen oDown.onclick = function () {
Umschalten = 1;
autoPlay(Umschalten);
};
// Wenn die Auf- und Abwärtspfeile bewegt werden, ändern Sie ihre Transparenz auf 1
oUp.onmouseover = oDown.onmouseover = Funktion () {
dieser.Stil.Filter = 'Alpha(Deckkraft:100)';
dieser.Stil.Opazität = 1;
};
// Wenn sich die Auf- und Ab-Pfeile bewegen, ändern Sie ihre Transparenz auf 0,6
oUp.onmouseout = oDown.onmouseout = Funktion () {
dieser.Stil.Filter = 'Alpha(Deckkraft:60)';
dieser.Stil.Opazität = 0,6;
};
// Bildbewegungsmethode, Umschalten stellt den Abwärts- oder Aufwärtswert dar Funktion autoPlay(umschalten) {
// Lösche den ursprünglichen Timer, wenn (oTime) {
löschenIntervall(oTime);
}
//Starte den Timer neu oTime = setInterval(function () {
// Das zweite Inkrement iNum += 2 * toggle;
// UL geht runter, wenn der obere Wert größer als 0 ist if (iNum > 0) {
//Setze den oberen Wert auf die Hälfte der negativen UL-Höhe (hochziehen)
iNum = -oLi.Länge * oLi[0].OffsetHeight / 2;
}
// UL geht nach oben, wenn der Absolutwert des oberen Wertes größer ist als die Hälfte der eigenen Breite von UL if (Math.abs(iNum) > oLi.length * oLi[0].offsetHeight / 2) {
// Den oberen Wert auf 0 setzen (nach unten ziehen)
iZahl = 0;
}
// Dem obersten Wert zuweisen oUl.style.top = iNum + 'px';
}, iMs);
};
autoPlay(Umschalten);
// Hol das Element mit dem aktuellen Stil function getClass(sName) {
für (i = 0; i < aDiv.Länge; i++) {
wenn (aDiv[i].className == sName) {
gib ein Div[i] zurück;
}
}
}
}
</Skript>
</Kopf>
<Text>
<div Klasse="Folienmodul" id="miaovSlide">
<!-- Aufwärtspfeil -->
<div Klasse="nach oben"></div>
<div Klasse="wrap">
<ul>
<li>
<ein>
<img src="bilder/1.jpg" />
</a>
</li>
<li>
<ein>
<img src="bilder/2.jpg" />
</a>
</li>
<li>
<ein>
<img src="bilder/3.jpg" />
</a>
</li>
<li>
<ein>
<img src="bilder/4.jpg" />
</a>
</li>
</ul>
</div>
<!-- Pfeil nach unten -->
<div Klasse="nach unten"></div>
</div>
</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:
|
<<: Tutorial zu HTML-Tabellen-Tags (3): Breiten- und Höhenattribute WIDTH, HEIGHT
>>: Implementierung einer Fuzzy-Abfrage wie %% in MySQL
Artikel empfehlen
Ein tiefer Einblick in die MySQL InnoDB-Speicher-Engine
Vorwort InnoDB gehört in MySQL zur Speicher-Engin...
Detailliertes Tutorial zur Konfigurationsmethode der kostenlosen Installationsversion von Mysql 5.7.19 (64-Bit)
Laden Sie mysql-5.7.19-winx64 von der offiziellen...
Detaillierte Erläuterung des grafischen Tutorials zur VMware12-Installation und CentOS8-Konfiguration (Tutorial zur Installation virtueller VM-Maschinen auf CentOS8)
CentOS8 wurde vor ein paar Tagen veröffentlicht. ...
MySQL 8.0.17 winx64 (mit Navicat) manuelle Konfiguration Version Installation Tutorial Diagramm
1. Download-Adresse: mysql-8.0.17-winx64 Herunter...
SQL-Zusammenführungsvorgang von Abfrageergebnissen von Tabellen mit unterschiedlichen Spalten
Um zwei verschiedene Tabellen abzufragen, müssen ...
Detaillierte Erläuterung der Berechnungsmethode von Flex-Grow und Flex-Shrink im Flex-Layout
Flex(彈性布局) in CSS kann das Layout einer Webseite ...
Lösen Sie das Problem, dass PhpStorm keine Verbindung zu VirtualBox herstellen kann
Problembeschreibung: Wenn der SFTP-Host von phpst...
Vue-Implementierungsbeispiel mit Google Recaptcha-Verifizierung
In unserem aktuellen Projekt müssen wir die Googl...
Detaillierte Erklärung von Javascript-Closures und -Anwendungen
Inhaltsverzeichnis Vorwort 1. Was ist ein Abschlu...
So stellen Sie npm so ein, dass Pakete aus mehreren Paketquellen gleichzeitig geladen werden
Inhaltsverzeichnis 1. Lokalen Speicher erstellen ...
svg+css oder js zum Erstellen eines Tick-Animationseffekts
Mein Chef hatte mich gebeten, ein Programm zu ers...
Analyse der Implementierungsschritte für die Docker-Containerverbindung
Im Allgemeinen verwenden wir nach dem Start des C...
Zusammenfassung der praktischen Methoden von CSS3 (empfohlen)
1. Abgerundeter Rand: CSS- CodeInhalt in die Zwis...
So implementieren Sie geplante MySQL-Aufgaben unter Linux
Annahme: Die gespeicherte Prozedur wird täglich v...
Verbesserung der Wirkung von Hyperlinks im Webdesign und in der Produktion
Hyperlinks ermöglichen es Benutzern, sofort von ei...