快捷導(dǎo)航

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

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

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

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

效果展示源碼下載

HTML

我們的HTML結(jié)構(gòu)由兩部分組成，div.timeline用于放置日期導(dǎo)航水平線，它有水平多個日期div.events-wrapper和水平軸左右方向?qū)Ш桨粹oul.cd-timeline-navigation組成。而div.events-content放置的是多個日期對應(yīng)的事件節(jié)點(diǎn)，它又多個li元素組成，li元素里面可以放置圖片文字等任意HTML內(nèi)容。注意這兩部分的html的li中都有data-date屬性，它的值是一個日期，正是通過data-date屬性將導(dǎo)航水平線與日期對應(yīng)的事件內(nèi)容關(guān)聯(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>標(biāo)題</h2> 
    <em>January 16th, 2014</em> 
    <p>  
     文字或者圖片等任意HTML內(nèi)容 
    </p> 
   </li> 
   <li data-date="28/02/2014"> 
    <!-- 對應(yīng)日期的事件描述信息 --> 
   </li> 
   <!-- 多個日期事件 --> 
  </ol> 
 </div> 
</section>

CSS

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

您可能感興趣的文章: