五、jq前端-时间轴插件

最新推荐文章于 2024-07-16 11:45:00 发布

悠然～.～

最新推荐文章于 2024-07-16 11:45:00 发布

阅读量1.9k

点赞数

分类专栏：前端-插件

本文链接：https://blog.csdn.net/lze693/article/details/69397943

版权

前端-插件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

时间轴插件的使用

源码（我自己做了很多的修改）：

<!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>

效果图：