jquery.timelinr.js 介绍
jquery.timelinr.js是一款效果非常炫酷的jQuery时间轴插件。jquery.timelinr可以制作水平和垂直时间轴效果，并且可以进行自动播放。你可以通过参数来控制每次时间轴切换的动画效果。
使用
<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
// value: integer between 100 and 1000 (recommended) or 'slow','normal' or 'fast'; default to normal
issuesdiv : '#issues',default to #issues
issuesSelectedClass: 'selected',default to selected
issuesspeed: 'fast','normal' 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 (normal)
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 (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)<
});
});
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.timelinr.js
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。