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時間軸插件的設定參數有：

orientation：時間軸的方向，可選值有：horizo​​ntal | vertical預設值為'horizo​​ntal'。
containerDiv：時間軸容器DIV的ID選擇器。預設為：'#timeline'。
datesDiv：顯示時間的容器的ID選擇器。預設為：'#dates'。
datesSelectedClass：目前選中時間的class。預設值為：'selected'。
datesSpeed：時間軸的動畫速度。值從100-1000，或'slow'，'normal'，'fast'。預設值為：'normal'。
issuesDiv：資訊描述的DIV的ID選擇器。預設為：'#issues'。
issuesSelectedClass：目前選擇的資訊描述的DIV的class。預設值為：'selected'。
issuesSpeed：資訊描述的DIV的動畫速度。值從100-1000，或'slow'，'normal'，'fast'。預設值為：'fast'。
issuesTransparency：資訊描述的DIV的透明度。值0-1之間，預設值為0.2。
issuesTransparencySpeed：透明度動畫的速度。值從100-1000之間，預設為500。
prevButton：向前按鈕的ID選擇器。預設為：'#prev'。
nextButton：向後按鈕的ID選擇器。預設為：'#next'。
arrowKeys：是否允許使用鍵盤來控制。預設為：false。
startAt：開始的索引下標，預設為1。
autoPlay：是否自動播放。預設為'false'。
autoPlayDirection：自動播放的方向。可選值有：forward | backward。預設值為：'forward'。
autoPlayPause：自動播放的間隔。整數值，1000 = 1秒，預設為2000。
jquery.timelinr.js時間軸插件的github位址為： https://github.com/juanbrujo/jQuery-Timelinr

以上所述是關於jQuery Timelinr實現垂直水平時間軸插件的相關內容，希望對大家有幫助！