ソース コード download_jquery を使用して、jQuery と CSS3 に基づいて応答性の高い水平タイムラインを作成します。

イベントの進行状況を記録するために縦型のタイムラインがよく使われているのをよく見かけますが、友人から横型のタイムラインを共有してほしいと頼まれました。実は、横型タイムラインの難しさは画面サイズに適応することです。そこで今日皆さんと共有したいのは、応答性とタッチ スクリーン ジェスチャ スライドをサポートする水平タイムラインです。

エフェクト表示 ソースコードダウンロード

HTML

私たちの HTML 構造は 2 つの部分で構成されています。div.timeline は、日付ナビゲーションの水平線を配置するために使用されます。これは、水平方向の複数の日付 div.events-wrapper と水平軸の左右のナビゲーション ボタン ul.cd-timeline-navigation で構成されます。 div.events-content は、複数の日付に対応するイベント ノードを配置します。これは、画像やテキストなどの HTML コンテンツを複数の li 要素に配置できます。 HTML のこれら 2 つの部分の 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 では、各 2 つの日付間の間隔の長さに基づいて、日付ナビゲーション バー上の 2 つの日付ノード間の距離を調整します。もちろん、最小値 (px) を設定し、日付に基づいて取得する必要があります。 data-date 属性に基づいて、日付の形式を設定します。 jQuery を使用して、左右のナビゲーション ボタンをクリックしてイベント コンテンツのスライド効果を実現します。特定のコードは比較的大きいため、ここではソース コードをダウンロードして main.js のコードの詳細を確認してください。プロジェクトに何も変更せずに直接適用できます。