JS realisiert die automatische Wiedergabe der Timeline
|
Vor kurzem habe ich einen solchen Effekt implementiert: Klicken Sie auf die Wiedergabetaste, die Zeitleiste beginnt mit der Wiedergabe. Klicken Sie auf Pause, sie stoppt an der aktuellen Position, und wenn Sie erneut auf Wiedergabe klicken, wird die Wiedergabe an der aktuellen Position fortgesetzt. Sie können auch auf das entsprechende Jahr klicken, um dorthin zu wechseln, und die Wiedergabe wird automatisch angehalten. Wenn Sie erneut auf Wiedergabe klicken, wird sie an der aktuellen Position gestartet.
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8" />
<Titel></Titel>
<link rel="stylesheet" type="text/css" href="fonts/iconfont.css" />
<Stilbereich>
ul,
li,
html,
Körper {
Rand: 0;
Polsterung: 0;
}
#Zeitleiste {
Listenstil: keiner;
Textausrichtung: zentriert;
Hintergrund: URL('img/xuanduan.png') 9px oben wiederholen-y;
}
#Zeitleiste li {
Hintergrundbild: URL('img/tuoyuan1.png');
Hintergrundwiederholung: keine Wiederholung;
Hintergrundposition: 0 15px;
Hintergrundgröße: 20px 20px;
Polsterung links: 30px;
Höhe: 50px;
Zeilenhöhe: 50px;
Farbe: #444;
Breite: 70px;
}
#Zeitleiste Lippe {
Breite: 70px;
Cursor: Zeiger;
Rand: 0;
}
.biaoqian {
Hintergrund: URL('img/biaoqian.png') 2px 13px keine Wiederholung;
;
Hintergrundgröße: 60px 24px;
Farbe: #fff;
}
#Zeitleiste .ausgewählt {
Hintergrund: URL('img/tuoyuan2.png') 0 15px keine Wiederholung;
Hintergrundgröße: 20px 20px;
}
.scroll-shell {
Breite: 100px;
Höhe: 96%;
Marge oben: 1,5 %;
Rand links: 20px;
schweben: links;
Überlauf: versteckt;
}
.scroll {
Breite: 118px;
Höhe: 103%;
Überlauf: automatisch;
Überlauf-x: versteckt;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Scroll-Shell">
<ul style="" id="Zeitleiste" ref="Zeitleiste" @click="Zeitleiste($event)" class="scroll">
</ul>
<i class="iconfont icon-bofang" id="bofangzanting" style="font-size: 38px;position: absolute;left: 25px;top: 91%;"></i>
</div>
<Skript>
lass Jahre = [2016, 2017, 2018, 2019, 2020, 2021, 2022]
lass Index = 0
let timer = null
//Erstelle das li, das der Zeitachse entspricht
Jahre.map(k => {
let createLi = document.createElement('li')
let createP = document.createElement('p')
erstellenP.innerHTML = k
erstelleLi.anhängenKind(erstelleP)
timeline.appendChild(erstelleLi)
})
//Der erste ist standardmäßig ausgewählt var lis = document.querySelectorAll('#timeline li')
lis[0].classList.add('ausgewählt')
var ps = document.querySelectorAll('#Zeitleistenlippe')
ps[0].classList.add('biaoqian')
//Klickereignis. Klicken Sie auf eines, um zum entsprechenden Effekt zu wechseln. var ulElement = document.querySelector('#timeline')
ulElement.onclick = Funktion(e) {
var lis = document.querySelectorAll('#Zeitleiste li')
var ps = document.querySelectorAll('#Zeitleistenlippe')
let event = e || Fenster.Ereignis
let ziel = ereignis.ziel || ereignis.quelle
wenn (ziel.tagName == 'P') {
Klassenänderung(ps, lis, Ziel)
für (lass i = 0; i < lis.length; i++) {
console.log(lis[i].getAttribute('Klasse'))
wenn (lis[i].getAttribute('Klasse') == 'ausgewählt') {
// Merke dir den Index, auf den zu diesem Zeitpunkt geklickt wurde, damit du mit der Wiedergabe fortfahren kannst, wenn du auf die Wiedergabetaste klickst index = i
konsole.log(index)
brechen;
}
}
}
}
// Gemeinsamer Teil, lösche alle Stile und füge dann den entsprechenden Klassennamen zur Klickfunktion classChange(ps, lis, target) { hinzu.
ps.forEach(k => {
k.classList.remove('biaoqian')
})
Ziel.Klassenliste.add('biaoqian')
lis.forEach(v => {
v.classList.remove('ausgewählt')
})
Ziel.parentNode.classList.add('ausgewählt')
}
//Wiedergabe- und Pausentasten let bofangzanting = document.getElementById('bofangzanting')
wenn (bofangzanting) {
bofangzanting.onclick = () => {
wenn (bofangzanting.className.indexOf('bofang') != -1) {
console.log('Zum Abspielen klicken')
console.log(Zeitgeber)
bofangzanting.classList.remove('icon-bofang')
bofangzanting.classList.add('icon-zanting')
wenn (Timer == undefiniert) {
autoPlay()
}
} anders {
console.log('Zum Anhalten klicken')
bofangzanting.classList.remove('icon-zanting')
bofangzanting.classList.add('icon-bofang')
wenn (Zeitgeber) {
Timer = Löschintervall(Timer)
} anders {
zurückkehren
}
}
}
}
//Automatische Wiedergabefunktion autoPlay() {
var lis = document.querySelectorAll('#Zeitleiste li')
var ps = document.querySelectorAll('#Zeitleistenlippe')
Timer = Intervall festlegen(() => {
console.log('Automatisch abspielen!')
wenn (Index < ps.Länge - 1) {
//Führe die nächste Klassenänderung aus (ps, lis, ps[index + 1])
Index++
} anders {
// Zum Anfang springen index = 0
Klassenänderung(ps, lis, ps[index])
}
konsole.log(index)
}, 1000)
}
</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-Deadlock-Problemen
Artikel empfehlen
Zwei Möglichkeiten zum Erstellen von Docker-Images
Inhaltsverzeichnis Aktualisieren Sie das Bild von...
Einfaches MySQL-Beispiel zum Sortieren chinesischer Schriftzeichen nach Pinyin
Wenn das Feld, in dem der Name gespeichert ist, d...
Sicherheitseinstellungen für Windows 2016 Server
Inhaltsverzeichnis Systemupdate-Konfiguration Änd...
Einige Fallstricke beim JavaScript Deep Copy
Vorwort Als ich zuvor zu einem Vorstellungsgesprä...
Lösung für den Fehler bei der Installation von Docker auf der CentOS-Version
1. Versionsinformationen # Katze /etc/system-rele...
Vollständiger Vue-Code zur Implementierung der Single-Sign-On-Steuerung
Hier ist zu Ihrer Information eine Vue-Single-Sig...
5 Möglichkeiten zur Migration von MySQL zu ClickHouse
Die Datenmigration muss von MySQL nach ClickHouse...
N Möglichkeiten, mit CSS ein zweispaltiges Layout zu erreichen
1. Was ist ein zweispaltiges Layout? Es gibt zwei...
Detaillierte Erklärung des "/"-Problems, wenn proxy_pass gemäß dem Pfad weiterleitet
Wenn Sie beim Konfigurieren von proxy_pass in ngi...
Das WeChat-Applet implementiert eine einfache handschriftliche Signaturkomponente
Inhaltsverzeichnis Hintergrund: brauchen: Wirkung...
Praxis der Verwendung von Tinymce Rich Text zum Anpassen von Symbolleistenschaltflächen in Vue
Inhaltsverzeichnis Installieren Sie die Deklarati...
Implementierung des klassischen CSS-Sticky-Footer-Layouts
Was ist ein Sticky-Footer-Layout? Unser übliches ...
mysql löst das Problem, Datensätze zu finden, bei denen zwei oder mehr Felder NULL sind
Kerncode /*-------------------------------- Suche...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.24
MySQL ist das beliebteste relationale Datenbankma...
So verwenden Sie Zen-Codierung in Dreamweaver
Nachdem ich meinen letzten Artikel „Zen Coding: Ei...