时间轴插件的使用
源码(我自己做了很多的修改):
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/timestyle.css"> <!-- Resource style -->
</head>
<body>
<section class="cd-horizontal-timeline">
<div class="timeline">
<div class="events-wrapper">
<div class="events">
<ol>
<li><a href="#0" data-date="01/01/2001" class="selected">2001</a></li>
<li><a href="#0" data-date="01/01/2002">2002</a></li>
<li><a href="#0" data-date="01/01/2003">2003</a></li>
<li><a href="#0" data-date="01/01/2004">2004</a></li>
<li><a href="#0" data-date="01/01/2005">2005</a></li>
<li><a href="#0" data-date="01/01/2006">2006</a></li>
<li><a href="#0" data-date="01/01/2007" >2007</a></li>
<li><a href="#0" data-date="01/01/2008">2008</a></li>
<li><a href="#0" data-date="01/01/2009">2009</a></li>
<li><a href="#0" data-date="01/01/2010">2010</a></li>
<li><a href="#0" data-date="01/01/2011">2011</a></li>
<li><a href="#0" data-date="01/01/2012">2012</a></li>
<li><a href="#0" data-date="01/01/2013">2013</a></li>
<li><a href="#0" data-date="01/01/2014">2014</a></li>
<li><a href="#0" data-date="01/01/2015">2015</a></li>
<li><a href="#0" data-date="01/01/2016">2016</a></li>
<li><a href="#0" data-date="01/01/2017">2017</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 -->
</section>
<section class="cd-horizontal-timeline">
<div class="timeline">
<div class="events-wrapper">
<div class="events">
<ol>
<li><a href="#0" data-date="01/01/2001" class="selected">1</a></li>
<li><a href="#0" data-date="02/01/2001">2</a></li>
<li><a href="#0" data-date="03/01/2001">3</a></li>
<li><a href="#0" data-date="04/01/2001">4</a></li>
<li><a href="#0" data-date="05/01/2001">5</a></li>
<li><a href="#0" data-date="06/01/2001">6</a></li>
<li><a href="#0" data-date="07/01/2001">7</a></li>
<li><a href="#0" data-date="08/01/2001">8</a></li>
<li><a href="#0" data-date="09/01/2001">9</a></li>
<li><a href="#0" data-date="10/01/2001">10</a></li>
<li><a href="#0" data-date="11/01/2001">11</a></li>
<li><a href="#0" data-date="12/01/2001">12</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 -->
</section>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/timemain.js"></script>
</body>
</html>
效果图:
项目源码地址:
https://github.com/lze693/Jp_time_axis