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

使用方法

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

HTML结构

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

  

    

    

    
  

    

      

        27
        一月
        2018
      
      

        
        

          
标题 
        
      
      

        
时间轴内容
      
    
  

    ...

  

                

初始化插件

在页面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