当前位置：首页 > 网页特效 > 日期和时间

简单实用的jQuery响应式垂直时间轴插件

分类：日期和时间日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<div class="cntl">
  <span class="cntl-bar cntl-center">
    <span class="cntl-bar-fill"></span>
  </span>
  <div class="cntl-states">
    <div class="cntl-state">
      <div class="cntl-content">
        <h4>Event 1</h4>
        <p>Description 1.</p>
      </div>
      <div class="cntl-icon cntl-center">Date/Time</div>
    </div>
 
    <div class="cntl-state">
      <div class="cntl-content">
        <h4>Event 2</h4>
        <p>Description 2.</p>
      </div>
      <div class="cntl-icon cntl-center">Date/Time</div>
    </div> 
     
    <div class="cntl-state">
      <div class="cntl-content">
        <h4>Event 3</h4>
        <p>Description 3.</p>
      </div>
      <div class="cntl-icon cntl-center">Date/Time</div>
    </div>
    ...
  </div>
</div> 
```
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该时间轴插件。

```html
<script>
    $(document).ready(function(e){
        $('.cntl').cntl();
    });
</script>    
```        
也可以在初始化时传入一些参数：

```html
<script>
    $(document).ready(function(e){
        $('.cntl').cntl({
            revealbefore: 300,
            anim_class: 'cntl-animate',
            onreveal: function(e){
                console.log(e);
            }
        });
    });
</script>    
```            
##### 配置参数
该时间轴插件有2个可用的配置参数：

- revealbefore：默认值：200。设置窗口滚动到元素距离窗口底部多少像素时相应的项才显示。
- anim_class：默认值：'cntl-animate'。动画元素的CLASS名称。用于控制动画的样式。可以参考CSS样式表的108-127行。

web299.com

简单实用的jQuery响应式垂直时间轴插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果