這是一個可以在PC和移動端表現非常棒的水平時間軸，它由上部水平滑塊和下部時間點對應的內容區塊，點選時間軸上的時間點，下部內容會滑動到對應的內容區塊。使用CSS3和jQuery技術使得時間軸滑塊可以左右滑動，非常強大。

1：引入js、css

<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->


<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery.mobile.custom.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->


2：body中的內容


<section class="cd-horizontal-timeline">//整個時間軸
<div class="timeline">//上面部分
<div class="events-wrapper">
<div class="events">//時間事件 注意 這裡data-data的內容必須是時間格式，<a>標籤的內容也是時間格式，這個時間軸是根據時間間隔長度畫調的
<ol>
<li>
<a href="#0" data-date="01/01/2014" class="selected">1 Jan</a>
</li>
<li>
<a href="#0" data-date="02/03/2014">2 Mar</a>
</li>
<li>
<a href="#0" data-date="03/12/2014">3 Dec</a>
</li>
</ol>


<span class="filling-line" aria-hidden="true"></span>
</div>  
</div>
<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>
 
</div>
<div class="events-content">//內容
<ol>
<li class="selected" data-date="01/01/2014">
<h2>標題1</h2>
<em>時間1</em>
<p>內容1 </p>
</li>


<li data-date="02/03/2014">
<h2>標題2</h2>
<em>時間2</em>
<p>內容2 </p>
</li>
<li data-date="03/01/2014">
<h2>標題3</h2>
<em>時間3</em>
<p>內容3</p>
</li>


</ol>
</div>
</section>