这是一款带动画特效的响应式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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!