基于jQuery和CSS3制作響應式水平時間軸附源碼下載

更新時間：2015年12月20日 14:09:29 投稿：mrr

我們經?？吹接泻芏嗟拇怪睍r間軸用來記錄事件進展，而有朋友問我要求分享水平的時間軸，其實水平時間軸的難點在于自適應屏幕尺寸。那么今天我要給大家分享的是一款支持響應式、支持觸屏手勢滑動的水平時間軸

我們經?？吹接泻芏嗟拇怪睍r間軸用來記錄事件進展，而有朋友問我要求分享水平的時間軸，其實水平時間軸的難點在于自適應屏幕尺寸。那么今天我要給大家分享的是一款支持響應式、支持觸屏手勢滑動的水平時間軸。

HTML

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

<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設計，所有的事件節(jié)點初始都在視圖之外，就是看不到的，除了.selected當前選中的日期節(jié)點。我們使用.enter-right/.enter-left來為事件節(jié)點進入視圖時添加動畫，使用.leave-right/.leave-left來為事件節(jié)點離開視圖時添加動畫。本例運用了很多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中，根據每兩個日期之間間隔的長短來調整日期導航條上兩個日期節(jié)點的距離，當然要設置一個最小值(px)，以及根據data-date屬性獲取日期，并將日期做格式化處理。使用jQuery實現(xiàn)點擊左右導航按鈕來實現(xiàn)事件內容的滑動效果，具體代碼由于比較多，就不在這里占用篇幅了，請大家下載源碼查看main.js里的代碼詳情，不做任何修改直接可以拿去應用到你的項目中去。

您可能感興趣的文章: