jquery.timelinr.js 介绍
jquery.timelinr.js是一款 效果 非常炫酷的jQuery时间轴 插件 。jquery.timelinr可以制作水平和垂直时间轴 效果 ，并且可以进行 自动 播放。你可以通过参数来控制每次时间轴切换的动画 效果 。
使用
包括 jQuery库和此 插件 ：
<script src="js/jquery-1.x.x.min.js"></script>
<script src="js/jquery.timelinr-x.x.x.js"></script>
使用 默 认参数进行初始化：?
$(function(){
$().timelinr();
});
或将其配置为首选：
$(function(){
$().timelinr({
orientation: 'horizontal',
// value: horizontal | vertical,default to horizontal
containerdiv: '#timeline',
// value: any html tag or #id,default to #timeline
datesdiv: '#dates',default to #dates
datesSelectedClass: 'selected',
// value: any class,default to selected
date ssp eed: ' nor mal',
// value: integer between 100 and 1000 (recommended) or 'slow',' nor mal' or 'fast'; default to nor mal
issuesdiv : '#issues',default to #issues
issuesSelectedClass: 'selected',default to selected
issue ssp eed: 'fast',' nor mal' or 'fast'; default to 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 ( nor mal)
prevButton: '#prev',default to #prev
nextButton: '#next',default to #next
arrowKeys: 'false',
// value: true/false,default to false
startAt: 1,
// value: integer,default to 1 (f irs t)
a utop lay: 'false',
// value: true | false,default to false
a utop layDirection: 'forward',
// value: forward | backward,default to forward
a utop layPause: 2000
// value: integer (1000 = 1 seg),default to 2000 (2segs)<
});
});
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>
GitHub: https://github.com/juanbrujo/jQuery-Timelinr
网站描述: 一款 效果 非常炫酷的jQuery时间轴 插件
jquery.timelinr.js官方网站
官方网站：
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。
查看更多关于jquery.timelinr.js的详细内容...