jQuery Timelinr-垂直水平jQuery时间轴插件

摘要:jquery.timelinr.js是一款效果非常炫酷的jQuery时间轴插件。jquery.timelinr可以制作水平和垂直时间轴效果,并且可以进行自动播放。你可以通过参数来控制每次时间轴切换的动画效果。推荐阅读:之前分享过一款 发展简史jQuery时间轴特效 ,它的界面展示效果很不错。

jquery.timelinr.js是一款效果非常炫酷的jQuery时间轴插件。jquery.timelinr可以制作水平和垂直时间轴效果,并且可以进行自动播放。你可以通过参数来控制每次时间轴切换的动画效果。推荐阅读:之前分享过一款 发展简史jQuery时间轴特效 ,它的界面展示效果很不错。

jQuery Timelinr-垂直水平jQuery时间轴插件

查看演示       下载插件

使用方法

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

<script src="js/jquery-1.x.x.min.js"></script>
<script src="js/jquery.timelinr-0.9.x.js"></script>

HTML结构

该时间轴插件的基本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>

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该时间轴插件。

$(function(){
    $().timelinr();
});

配置参数

jquery.timelinr.js时间轴插件的配置参数有:

  • orientation:时间轴的方向,可选值有:horizontal | vertical默认值为'horizontal'。
  • containerDiv:时间轴容器DIV的ID选择器。默认为:'#timeline'。
  • datesDiv:显示时间的容器的ID选择器。默认为:'#dates'。
  • datesSelectedClass:当前选中时间的class。默认值为:'selected'。
  • datesSpeed:时间轴的动画速度。值从100-1000,或'slow','normal','fast'。默认值为:'normal'。
  • issuesDiv:信息描述的DIV的ID选择器。默认为:'#issues'。
  • issuesSelectedClass:当前选择的信息描述的DIV的class。默认值为:'selected'。
  • issuesSpeed:信息描述的DIV的动画速度。值从100-1000,或'slow','normal','fast'。默认值为:'fast'。
  • issuesTransparency:信息描述的DIV的透明度。值0-1之间,默认值为0.2。
  • issuesTransparencySpeed:透明度动画的速度。值从100-1000之间,默认为500。
  • prevButton:向前按钮的ID选择器。默认为:'#prev'。
  • nextButton:向后按钮的ID选择器。默认为:'#next'。
  • arrowKeys:是否允许使用键盘来控制。默认为:false。
  • startAt:开始的索引下标,默认为1。
  • autoPlay:是否自动播放。默认为'false'。
  • autoPlayDirection:自动播放的方向。可选值有:forward | backward。默认值为:'forward'。
  • autoPlayPause:自动播放的间隔。整数值,1000 = 1秒,默认为2000。

jquery.timelinr.js时间轴插件的github地址为: https://github.com/juanbrujo/jQuery-Timelinr

来源:jQuery之家

来自: http://www.html5cn.org/article-9329-1.html

扩展阅读

10个最实用的个时间轴jQuery插件(带详细说明)
分享8个超酷的javascript类库和jQuery插件帮助你打造超炫的网站和web应用
分享10款绝对让你心动的jQuery插件
2012最新JQuery插件
8个引人注目的HTML5/jQuery动画插件

为您推荐

jQuery Timelinr-垂直水平jQuery时间轴插件
最新jQuery Mobile 1.2版本新特性
HTML5/CSS3系列教程:HTML5基本标签使用header,nav和footer
10个最佳的HTML5代码段,以简化您的开发任务
20个你应该知道的有用HTML5代码段

更多

jQuery
前端技术