日期:2011/10/09 原文:GBin1.com
很多情況下,我們需要以時間序列方式列出相關的事件或者信息,這往往會用到時間軸特效,例如,GBin1網站的關於頁面我們自己實現了一個簡單的時間軸特效:http://www.gbin1.com/portfolio/about/ 。
爲了方便大家快速實現時間軸特效,今天GBin1這裏給大家介紹一款非常酷的時間軸特效插件Timelinr,希望大家能喜歡。
Timelinr插件首頁: http://www.csslab.cl/2011/08/18/jquery-timelinr/
目前Timelinr版本爲0.9.4,支持垂直及其水平方向的時間軸顯示,並且支持透明自動播放。
代碼介紹
引入jQuery類庫和插件類庫,如下:
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script> <script src="js/jquery.timelinr-0.9.js" type="text/javascript"></script>
初始化缺省參數,如下:
<script type="text/javascript"> $(function(){ $().timelinr(); }); </script>
或者定製參數內容,如下:
<script type="text/javascript"> $(function(){ $().timelinr({ orientation: 'horizontal', // value: horizontal | vertical, default to horizontal containerDiv: '#timeline', // value: any HTML tag or #id, default to #timeline datesDiv: '#dates', // value: any HTML tag or #id, default to #dates datesSelectedClass: 'selected', // value: any class, default to selected datesSpeed: 500, // value: integer between 100 and 1000 (recommended), default to 500 (normal) issuesDiv : '#issues', // value: any HTML tag or #id, default to #issues issuesSelectedClass: 'selected', // value: any class, default to selected issuesSpeed: 200, // value: integer between 100 and 1000 (recommended), default to 200 (fast) issuesTransparency: 0.2, // value: integer between 0 and 1 (recommended), default to 0.2 issuesTransparencySpeed: 500, // value: integer between 100 and 1000 (recommended), default to 500 (normal) prevButton: '#prev', // value: any HTML tag or #id, default to #prev nextButton: '#next', // value: any HTML tag or #id, default to #next arrowKeys: 'false', // value: true/false, default to false startAt: 1, // value: integer, default to 1 (first) autoPlay: 'false', // value: true | false, default to false autoPlayDirection: 'forward', // value: forward | backward, default to forward autoPlayPause: 2000 // value: integer (1000 = 1 seg), default to 2000 (2segs) }); }); </script>
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>
搞定!大家看到使用非常簡單。效果非常強大!