jQuery Timelinr implementiert vertikale und horizontale Timeline-Plug-Ins (mit Quellcode-Download)_jquery

jquery.timelinr.js ist ein jQuery-Timeline-Plug-in mit sehr coolen Effekten. jquery.timelinr kann horizontale und vertikale Timeline-Effekte erstellen und eine automatische Wiedergabe durchführen. Sie können den Animationseffekt jedes Timeline-Schalters über Parameter steuern.

Empfohlene Lektüre: Ich habe eine jQuery-Implementierung des Quellcodes für Spezialeffekte der Unternehmensentwicklung geteilt.

Effektanzeige Quellcode-Download

Anwendung

Die Verwendung dieses Timeline-Plug-Ins erfordert das Einfügen von jQuery- und jquery.timelinr.js-Dateien in die Seite.

<script src="js/jquery-1.x.x.min.js"></script>
<script src="js/jquery.timelinr-0.9.x.js"></script>

HTML-Struktur

Die grundlegende HTML-Struktur des Timeline-Plug-Ins ist wie folgt:

<div id="timeline">
<ul id="dates">
<li><a href="#">date1</a></li>
<li><a href="#">date2</a></li>
</ul>
<ul id="issues">
<li id="date1">
<p>Lorem ipsum.</p>
</li>
<li id="date2">
<p>Lorem ipsum.</p>
</li>
</ul>
<a href="#" id="next">+</a> <!-- optional -->
<a href="#" id="prev">-</a> <!-- optional -->
</div>

Initialisierungs-Plug-in

Nachdem das Seiten-DOM-Element geladen wurde, können Sie das Timeline-Plug-in mit der folgenden Methode initialisieren.

$(function(){
$().timelinr();
});

Konfigurationsparameter

Die Konfigurationsparameter des Timeline-Plug-Ins von jquery.timelinr.js sind:

Ausrichtung: Die Richtung der Zeitachse ist: horizontal | vertikal.
containerDiv: ID-Selektor des Timeline-Containers DIV. Standard: '#timeline'.
dateDiv: ID-Selektor des Containers, der die Uhrzeit anzeigt. Standard: '#dates'.
dateSelectedClass: Die Klasse der aktuell ausgewählten Zeit. Der Standardwert ist: „ausgewählt“.
dateSpeed: Die Animationsgeschwindigkeit der Timeline. Werte von 100-1000, oder „langsam“, „normal“, „schnell“. Der Standardwert ist: „normal“.
issuesDiv: ID-Selektor des DIV der Informationsbeschreibung. Standard: '#issues'.
issuesSelectedClass: Die Klasse des DIV, die durch die aktuell ausgewählten Informationen beschrieben wird. Der Standardwert ist: „ausgewählt“.
issuesSpeed: Informationen zur Beschreibung der Animationsgeschwindigkeit des DIV. Werte von 100-1000, oder „langsam“, „normal“, „schnell“. Der Standardwert ist: „schnell“.
IssuesTransparency: Die Transparenz des durch die Informationen beschriebenen DIV. Wert zwischen 0 und 1, Standardwert ist 0,2.
issuesTransparencySpeed: Die Geschwindigkeit der Transparenzanimation. Der Wert liegt zwischen 100 und 1000, der Standardwert ist 500.
prevButton: ID-Auswahl für die Vorwärtstaste. Standard: '#prev'.
nextButton: ID-Selektor für die nächste Schaltfläche. Standard: '#next'.
Pfeiltasten: Ob die Tastatursteuerung zugelassen werden soll. Standard: false.
startAt: Der Startindex-Index, der Standardwert ist 1.
autoPlay: ob automatisch abgespielt werden soll. Der Standardwert ist „false“.
autoPlayDirection: Die Richtung der automatischen Wiedergabe. Optionale Werte sind: vorwärts |. rückwärts. Der Standardwert ist: „forward“.
autoPlayPause: Autoplay-Intervall. Ganzzahliger Wert, 1000 = 1 Sekunde, Standard ist 2000.
Die Github-Adresse des Timeline-Plug-Ins von jquery.timelinr.js lautet: https://github.com/juanbrujo/jQuery-Timelinr

Oben geht es um die jQuery Timelinr-Implementierung des vertikalen und horizontalen Timeline-Plug-Ins. Ich hoffe, es wird für alle hilfreich sein!