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：時間軸的方向，可選值有：horizontal | vertical默認值為'horizontal'。
• 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之家