jquery.timelinr.js是一款效果非常炫酷的jQuery時間軸插件。jquery.timelinr可以制作水平和垂直時間軸效果,并且可以進(jìn)行自動播放。你可以通過參數(shù)來控制每次時間軸切換的動畫效果。
推薦閱讀:之前分享過一款 jQuery實(shí)現(xiàn)企業(yè)發(fā)展簡史時間軸特效源碼 ,它的界面展示效果很不錯。

使用方法
使用該時間軸插件需要在頁面中引入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)
該時間軸插件的基本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元素加載完畢之后,可以通過下面的方法來初始化該時間軸插件。
$(function(){$().timelinr();});配置參數(shù)
jquery.timelinr.js時間軸插件的配置參數(shù)有:
orientation:時間軸的方向,可選值有:horizontal | vertical默認(rèn)值為'horizontal'。
containerDiv:時間軸容器DIV的ID選擇器。默認(rèn)為:'#timeline'。
datesDiv:顯示時間的容器的ID選擇器。默認(rèn)為:'#dates'。
datesSelectedClass:當(dāng)前選中時間的class。默認(rèn)值為:'selected'。
datesSpeed:時間軸的動畫速度。值從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:自動播放的方向。可選值有:forward | backward。默認(rèn)值為:'forward'。
autoPlayPause:自動播放的間隔。整數(shù)值,1000 = 1秒,默認(rèn)為2000。
jquery.timelinr.js時間軸插件的github地址為: https://github.com/juanbrujo/jQuery-Timelinr
以上所述是關(guān)于jQuery Timelinr實(shí)現(xiàn)垂直水平時間軸插件的相關(guān)內(nèi)容,希望對大家有所幫助!
新聞熱點(diǎn)
疑難解答