快捷導(dǎo)航

jQuery Timelinr實(shí)現(xiàn)垂直水平時(shí)間軸插件(附源碼下載)

更新時(shí)間：2016年02月16日 17:09:35 投稿：mrr

jquery.timelinr.js是一款效果非常炫酷的jQuery時(shí)間軸插件。下面腳本之家小編給大家介紹jQuery Timelinr實(shí)現(xiàn)垂直水平時(shí)間軸插件，需要的朋友參考下

jquery.timelinr.js是一款效果非常炫酷的jQuery時(shí)間軸插件。jquery.timelinr可以制作水平和垂直時(shí)間軸效果，并且可以進(jìn)行自動播放。你可以通過參數(shù)來控制每次時(shí)間軸切換的動畫效果。

推薦閱讀：之前分享過一款 jQuery實(shí)現(xiàn)企業(yè)發(fā)展簡史時(shí)間軸特效源碼，它的界面展示效果很不錯。

效果展示源碼下載

使用方法

使用該時(shí)間軸插件需要在頁面中引入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結(jié)構(gòu)

該時(shí)間軸插件的基本HTML結(jié)構(gòu)如下：

<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元素加載完畢之后，可以通過下面的方法來初始化該時(shí)間軸插件。

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

配置參數(shù)

jquery.timelinr.js時(shí)間軸插件的配置參數(shù)有：

orientation：時(shí)間軸的方向，可選值有：horizontal | vertical默認(rèn)值為'horizontal'。
containerDiv：時(shí)間軸容器DIV的ID選擇器。默認(rèn)為：'#timeline'。
datesDiv：顯示時(shí)間的容器的ID選擇器。默認(rèn)為：'#dates'。
datesSelectedClass：當(dāng)前選中時(shí)間的class。默認(rèn)值為：'selected'。
datesSpeed：時(shí)間軸的動畫速度。值從100-1000，或'slow'，'normal'，'fast'。默認(rèn)值為：'normal'。
issuesDiv：信息描述的DIV的ID選擇器。默認(rèn)為：'#issues'。
issuesSelectedClass：當(dāng)前選擇的信息描述的DIV的class。默認(rèn)值為：'selected'。
issuesSpeed：信息描述的DIV的動畫速度。值從100-1000，或'slow'，'normal'，'fast'。默認(rèn)值為：'fast'。
issuesTransparency：信息描述的DIV的透明度。值0-1之間，默認(rèn)值為0.2。
issuesTransparencySpeed：透明度動畫的速度。值從100-1000之間，默認(rèn)為500。
prevButton：向前按鈕的ID選擇器。默認(rèn)為：'#prev'。
nextButton：向后按鈕的ID選擇器。默認(rèn)為：'#next'。
arrowKeys：是否允許使用鍵盤來控制。默認(rèn)為：false。
startAt：開始的索引下標(biāo)，默認(rèn)為1。
autoPlay：是否自動播放。默認(rèn)為'false'。
autoPlayDirection：自動播放的方向?？蛇x值有：forward | backward。默認(rèn)值為：'forward'。
autoPlayPause：自動播放的間隔。整數(shù)值，1000 = 1秒，默認(rèn)為2000。
jquery.timelinr.js時(shí)間軸插件的github地址為： https://github.com/juanbrujo/jQuery-Timelinr