带动画特效的响应式jQuery垂直时间轴插件

带动画特效的响应式jQuery垂直时间轴插件

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

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

1
2
3
4
5
<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结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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()方法来初始化该垂直时间轴插件。

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

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

1
2
3
4
5
6
7
8
9
10
$('.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。

文件信息:

    0

    发表评论