jquery.timelinr.js

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

datesSpeed: 'normal',

// 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时间轴插件

jquery.timelinr.js

官方网站：

小编说

以上是编程之家为你收集整理的jquery.timelinr.js全部内容。

如果觉得编程之家网站内容还不错，欢迎将编程之家推荐给好友。