1、使用CSS3和jQuery制作的水平时间轴

这是一个可以在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>