使用jQuery和CSS3制作的響應式水平時間軸

我們經常看到有很多的垂直時間軸用來記錄事件進展，而有朋友問我要求分享水平的時間軸，其實水平時間軸的難點在于自適應屏幕尺寸。那么 今天我要給大家分享的是一款支持響應式、支持觸屏手勢滑動的水平時間軸。

查看演示 下載源碼

HTML

我們的HTML結構由兩部分組成，div.timeline用于放置日期導航水平線，它有水平多個日期div.events-wrapper和 水平軸左右方向導航按鈕ul.cd-timeline-navigation組成。而div.events-content放置的是多個日期對應的事件節 點，它又多個li元素組成，li元素里面可以放置圖片文字等任意HTML內容。注意這兩部分的html的li中都有data-date屬性，它的值是一個 日期，正是通過data-date屬性將導航水平線與日期對應的事件內容關聯起來的。

<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>
          <!-- 多個日期 -->
        </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>標題</h2>
        <em>January 16th, 2014</em>
        <p>   
          文字或者圖片等任意HTML內容
        </p>
      </li>

      <li data-date="28/02/2014">
        <!-- 對應日期的事件描述信息 -->
      </li>

      <!-- 多個日期事件 -->
    </ol>
  </div>
</section>

CSS

來看時間軸事件的css設計，所有的事件節點初始都在視圖之外，就是看不到的，除了.selected當前選中的日期節點。我們使 用.enter-right/.enter-left來為事件節點進入視圖時添加動畫，使用.leave-right/.leave-left來為事件節 點離開視圖時添加動畫。本例運用了很多CSS3動畫效果，請看代碼：

.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%);
  }
}

JS

在main.js中，根據每兩個日期之間間隔的長短來調整日期導航條上兩個日期節點的距離，當然要設置一個最小值(px)，以及根據data- date屬性獲取日期，并將日期做格式化處理。使用jQuery實現點擊左右導航按鈕來實現事件內容的滑動效果，具體代碼由于比較多，就不在這里占用篇幅 了，請大家下載源碼查看main.js里的代碼詳情，不做任何修改直接可以拿去應用到你的項目中去。