1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > html发展时间轴纵向插件 jquery响应式垂直时间轴插件vertical-timeline

html发展时间轴纵向插件 jquery响应式垂直时间轴插件vertical-timeline

时间:2018-06-26 21:49:45

相关推荐

html发展时间轴纵向插件 jquery响应式垂直时间轴插件vertical-timeline

插件描述:jquery-vertical-timeline是一款简单实用的jQuery响应式垂直时间轴插件。

jquery-vertical-timeline

是一款简单实用的jQuery响应式垂直时间轴插件。该时间轴插件使用CSS3制作动画效果,使用媒体查询来制作响应式效果。使用非常简单,样式可以自由定义。

所需文件

使用该时间轴插件需要引入相关的js和CSS文件。

使用方法

HTML结构

使用这个时间轴插件需要下面的HTML结构:

Event1

Description1.

Date/Time

Event2

Description2.

Date/Time

Event3

Description3.

Date/Time

...

初始化插件

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

$(document).ready(function(e){

$('.cntl').cntl();

});

也可以在初始化时传入一些参数:

$(document).ready(function(e){

$('.cntl').cntl({

revealbefore:300,

anim_class:'cntl-animate',

onreveal:function(e){

console.log(e);

}

});

});

配置参数

该时间轴插件有2个可用的配置参数:

revealbefore:默认值:200。设置窗口滚动到元素距离窗口底部多少像素时相应的项才显示。

anim_class:默认值:'cntl-animate'。动画元素的CLASS名称。用于控制动画的样式。可以参考CSS样式表的108-127行。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。