这是一款带动画特效的响应式jQuery垂直时间轴插件。该jQuery垂直时间轴插件采用响应式设计，内容支持图片，文字和视频，在展示时还带有炫酷的动画效果。

使用方法

在页面中引入jquery和bootstrap文件，以及font-awesome字体图标，timeLine.js和样式文件style.css。

<link rel="stylesheet" href="path/to/bootstrap.min.css">
<link rel="stylesheet" href="path/to/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="path/to/jquery.min.js"></script>
<script src="js/timeLine.js"></script>
HTML结构

该jQuery垂直时间轴的HTML结构如下：

<div class="timeLine">
  <div class="row">
    <div class="lineHeader hidden-sm hidden-xs"></div>
    <div class="lineFooter hidden-sm hidden-xs"></div>
    
  <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 item" >
    <div class="caption">
      <div class="star center-block">
        <span class="h3">27</span>
        <span>一月</span>
        <span>2018</span>
      </div>
      <div class="image">
        <img src="img/born.jpg">
        <div class="title">
          <h2>标题 <i class="fa fa-arrow-circle-right" aria-hidden="true"></i></h2>
        </div>
      </div>
      <div class="textContent">
        <p class="lead">时间轴内容</p>
      </div>
    </div>
  </div>

    ...

  </div>
</div>
初始化插件

在页面DOM元素加载完毕之后，通过timeLine()方法来初始化该垂直时间轴插件。

$('.timeLine').timeLine();

配置参数

该垂直时间轴插件的可用配置参数如下：

$('.timeLine').timeLine({
  myTimeLine: this,
  mainColor: '',    //Main color of timeLine
  opacity: '0.5',
  offset: '400',
  itemAnimateDuration: 2,
  lineColor: '#DDDDDD',
  LeftAnimation: 'rotateInUpRight', // see Animate.css                                      
  RightAnimation: 'rotateInUpLeft',    
});
  • mainColor：时间轴的颜色。
  • opacity：时间轴的透明度。
  • offset：偏移位置。
  • itemAnimateDuration：动画的持续时间。
  • lineColor：线条的颜色。
  • LeftAnimation：时间轴左侧的动画效果。CSS动画名称参考Animate.css。
  • RightAnimation：时间轴右侧的动画效果。CSS动画名称参考Animate.css。

该垂直时间轴插件的github地址为：https://github.com/AhmedBHameed/TimeLine