基於jQuery和CSS3製作響應式水平時間軸附源碼下載_jquery

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

效果展示     源碼下載

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裡的代碼詳情，不做任何修改直接可以拿去應用到你的項目中去。