类似幻灯片效果的水平时间轴特效插件

这是一款设计非常精美的jQuery和CSS3水平时间轴特效插件。该水平时间轴在设计上将时间轴和事件内容分离，时间轴在工作上类似幻灯片效果，而某个时间点对应的事件占据整个时间轴的宽度，并且一次只显示一个事件内容。

HTML结构

该水平时间轴的HTML结构包括两个部分：一个是时间轴日期，另一个是相应的事件。ul.cd-timeline-navigation元素用于导航箭头，span.filling-line用于当一个新的事件时间点被选择的时候的时间轴填充效果。

<section class="cd-horizontal-timeline">
  <div class="timeline">
    <div class="events-wrapper">
      <div class="events">
        <ol>
          <li><a href="#0" data-date="16/01/2014" class="selected">16 Jan</a></li>
          <li><a href="#0" data-date="28/02/2014">28 Feb</a></li>
          <!-- other dates here -->
        </ol>
 
        <span class="filling-line" aria-hidden="true"></span>
      </div> <!-- .events -->
    </div> <!-- .events-wrapper -->
      
    <ul class="cd-timeline-navigation">
      <li><a href="#0" class="prev inactive">Prev</a></li>
      <li><a href="#0" class="next">Next</a></li>
    </ul> <!-- .cd-timeline-navigation -->
  </div> <!-- .timeline -->
 
  <div class="events-content">
    <ol>
      <li class="selected" data-date="16/01/2014">
        <h2>Horizontal Timeline</h2>
        <em>January 16th, 2014</em>
        <p> 
          ......
        </p>
      </li>
 
      <li data-date="28/02/2014">
        <!-- event description here -->
      </li>
 
      <!-- other descriptions here -->
    </ol>
  </div> <!-- .events-content -->
</section>                
              

CSS样式

在水平时间轴的事件内容的样式中，所有的事件内容项都是从右边进入，开始时他们位于右侧视口的边缘（translateX(-100%)）。当某个时间点被选择的时候，相应的事件内容会被添加.selected class，该class会将这些内容移动会屏幕中（translateX(0)）。

有4个class用于创建幻灯片动画效果：.enter-right / .leave-left class用于事件内容向左或向右移出视口。这些class被应用2种不同的动画：cd-enter-right（用于 .enter-right和.leave-left），cd-enter-left（用于.enter-left和.leave-right）。

.cd-horizontal-timeline .events-content {
  position: relative;
}
.cd-horizontal-timeline .events-content li {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  top: 0;
  transform: translateX(-100%);
  opacity: 0;
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
}
.cd-horizontal-timeline .events-content li.selected {
  /* visible event content */
  position: relative;
  z-index: 2;
  opacity: 1;
  transform: translateX(0);
}
.cd-horizontal-timeline .events-content li.enter-right, 
.cd-horizontal-timeline .events-content li.leave-right {
  animation-name: cd-enter-right;
}
.cd-horizontal-timeline .events-content li.enter-left, 
.cd-horizontal-timeline .events-content li.leave-left {
  animation-name: cd-enter-left;
}
.cd-horizontal-timeline .events-content li.leave-right, 
.cd-horizontal-timeline .events-content li.leave-left {
  animation-direction: reverse;
}
@keyframes cd-enter-right {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes cd-enter-left {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
                
              

JavaScript

对于时间轴，沿时间轴上的日期是使用jQuery设置上去的。时间轴上的日期分布并不是均匀的，但是这些日期之间的距离比例是一致的。

在main.js文件中，使用变量eventsMinDistance来设置两个连续的最小日期之间的距离。在代码中设置的是eventsMinDistance = 60 ，表示最小距离为60像素。然后需要获取一个日期和下一个日期之间的差值，为了获取这些值，特效中为每一个日期都添加了data-date属性。最小距离将会作为参考来计算两个连续日期之间的距离。

举个例子，假设最小的日期间隔为5天，那么在水平时间轴上5天之间的两个时间点距离为60像素，而10天的距离就为120像素。

对于日期格式，插件中使用的日期格式为DD/MM/YYYY，如果需要你也可以添加时分秒。你可以使用以下3种不同的日期格式：

• DD/MM/YYYY
• DD/MM/YYYYTHH:MM
• HH:MM

最后需要注意的是，时间轴日期上使用的data-date属性也会被设置到代表事件的项中，这样当用户在时间轴上旋转了一个日期之后，相应的事件项才能被显示。