jQuery Timelinr は垂直および水平タイムライン プラグインを実装します (ソース コードのダウンロード付き)_jquery

jquery.timelinr.js は、非常にクールな効果を備えた jQuery タイムライン プラグインです。 jquery.timelinr は水平および垂直のタイムライン効果を作成し、自動再生を実行できます。パラメーターを使用して、各タイムライン スイッチのアニメーション効果を制御できます。

推奨読書: 企業開発タイムラインの特殊効果の簡単な歴史を実装するための jQuery ソース コードを共有しました。そのインターフェイスの表示効果は非常に優れています。

エフェクト表示 ソースコードダウンロード

使用方法

このタイムライン プラグインを使用するには、jQuery および jquery.timelinr.js ファイルをページに導入する必要があります。

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

HTML 構造

タイムライン プラグインの基本的な HTML 構造は次のとおりです:

<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>

初期化プラグイン

ページ DOM 要素が読み込まれた後、次の方法でタイムライン プラグインを初期化できます。

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

設定パラメータ

jquery.timelinr.js タイムライン プラグインの構成パラメーターは次のとおりです:

方向: タイムラインの方向。オプションの値は次のとおりです。デフォルト値は「horizo​​ntal」です。
ContainerDiv: タイムラインコンテナ DIV の ID セレクター。デフォルト:「#タイムライン」。
daysDiv: 時間を表示するコンテナの ID セレクター。デフォルト: '#dates'。
daysSelectedClass: 現在選択されている時間のクラス。デフォルト値は「選択済み」です。
dateSpeed: タイムラインのアニメーション速度。 100 ～ 1000 の値、または「遅い」、「標準」、「速い」。デフォルト値は「通常」です。
issuesDiv:情報説明のDIVのIDセレクター。デフォルト: '#issues'。
issuesSelectedClass: 現在選択されている情報によって記述される DIV のクラス。デフォルト値は「選択済み」です。
issuesSpeed: DIVのアニメーション速度を説明する情報。 100 ～ 1000 の値、または「遅い」、「標準」、「速い」。デフォルト値は「高速」です。
issuesTransparency: 情報によって記述される DIV の透明度。 0 ～ 1 の値。デフォルト値は 0.2 です。
issuesTransparencySpeed: 透明アニメーションの速度。値の範囲は 100 ～ 1000 で、デフォルトは 500 です。
prevButton: 進むボタンの ID セレクター。デフォルト: '#prev'。
nextButton: 次へボタンの ID セレクター。デフォルト:「#next」。
arrowKeys: キーボード制御を許可するかどうか。デフォルト: false。
startAt: 開始インデックスの添字、デフォルトは 1 です。
autoPlay: 自動的に再生するかどうか。デフォルトは「false」です。
autoPlayDirection: 自動再生の方向。オプションの値は次のとおりです。デフォルト値は「転送」です。
autoPlayPause: 自動再生間隔。整数値、1000 = 1 秒、デフォルトは 2000 です。
jquery.timelinr.js タイムライン プラグインの github アドレスは: https://github.com/juanbrujo/jQuery-Timelinr

上記は、垂直および水平タイムライン プラグインの jQuery Timelinr の実装についてです。皆さんの参考になれば幸いです。