jquery响应式垂直时间轴插件vertical-timeline

所属分类:输入,UI-日期和时间,滚动

 38422  406  查看评论 (0)
分享到微信朋友圈
X
jquery响应式垂直时间轴插件vertical-timeline ie兼容10

jquery-vertical-timeline

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

所需文件

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

<link rel="stylesheet" type="text/css" href="lib/cntl.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="lib/jquery.cntl.js"></script>

 使用方法

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元素加载完毕之后,可以通过下面的方法来初始化该时间轴插件。

<script>
    $(document).ready(function(e){
        $('.cntl').cntl();
    });
</script>            
也可以在初始化时传入一些参数:
<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行。

相关插件-日期和时间,滚动

jquery日历控件datePicker

jquery.datePicker日历控件应用text文本框弹出日历表与默认显示日历表
  日期和时间
 66385  370

时间日期插件

jQuery可选择日期范围的日期选择器插件
  日期和时间
 77027  399

jQuery手机端时间选择插件jquery.promptumenu

jquery.promptumenu手机端时间选择器,开始时间选择,开始时间选择限制
  日期和时间
 31343  347

圆形时间进度条-倒计时

html5 + css3 打造的圆形时间倒计时进度条
  日期和时间
 54195  348

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复