基於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裡的程式碼詳情，不做任何修改直接可以拿去應用到你的專案中去。