jQuery Timelinr实现纵横时间轴插件(带源代码下载)

JQuery.timelinr.js是一个具有酷炫效果的JQuery时间轴插件。Jquery.timelinr可以制作水平和垂直的时间轴效果并自动播放。您可以通过参数控制每个时间轴切换的动画效果。

推荐阅读：我分享了一个jQuery的源代码，实现了企业发展简史的时间轴特效，其界面显示效果非常好。

下载效果显示源代码。

施用方式

要使用时间轴插件，需要在页面中引入jQuery和jquery.timelinr.js文件。

script src=' http : js/jquery-1 . x . x . min . js '/script script src=' http : js/jquery . timelinr-0.9 . x . js '/script html结构。

时间轴插件的基本HTML结构如下：

div id=' timeline ' ul id=' date ' lia href=' # ' date 1/a/lilia href=' # ' date 2/a/Li/ul id=' issues ' Li id=' date 1 ' pLorem ipsum。/p/lili id='date2'pLorem ipsum。/p/li/ula href='#' id='next' /a！-可选- a href='#' id='prev'-/a！-可选- /div初始化插件。

加载页面DOM元素后，可以通过以下方法初始化时间轴插件。

$(function(){$()。timelinr()；});结构参数

jquery.timelinr.js时间轴插件的配置参数如下：

方向：时间线的方向。可选值为水平|垂直。默认值为“水平”。ContainerDiv:时间轴容器Div的ID选择器。默认值为：“#timeline”。DatesDiv:显示时间的容器的ID选择器。默认值为：“# dates”。DatesSelectedClass:当前选定时间的类。默认值为：“已选择”。日期速度：时间线的动画速度。该值介于100-1000之间，即“慢”、“正常”、“快”。默认值为“正常”。IssuesDiv:信息描述的Div的ID选择器。默认值为：“#issues”。IssuesSelectedClass:当前所选信息描述的DIV的类。默认值为：“已选择”。问题速度：信息描述的DIV的动画速度。该值介于100-1000之间，即“慢”、“正常”、“快”。默认值为“快速”。问题透明度：由信息描述的DIV的透明度。该值介于0和1之间，默认值为0.2。IssuesTransparencySpeed:透明度动画的速度。该值介于100和1000之间，默认值为500。前进按钮：前进按钮的标识选择器。默认值为：“#prev”。下一步按钮：后退按钮的标识选择器。默认值为：“#next”。箭头键：是否允许键盘控制。默认值为：false。StartAt:start的索引下标，默认为1。自动播放：是否自动播放。默认值为“假”。自动播放方向：自动播放的方向。可选值为：向前|向后。默认值为“前进”。自动播放暂停：自动播放的间隔。整数值，1000=1秒，默认值为2000。jquery.timelinr.js时间轴插件的Github地址是：https://github.com/juanbrujo/jQuery-Timelinr.

以上与jQuery Timelinr实现纵横时间轴插件有关，希望对大家有所帮助！