zm/journal_com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

begin

Browse Source
This commit is contained in:
wangjinlei
2023-05-18 09:42:12 +08:00
commit 6e7ee3dd44
1214 changed files with 103535 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
js/line-switch/index.html Normal file
View File

@@ -0,0 +1,177 @@
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery水平时间轴内容切换插件DEMO演示</title>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
</head>
<body>
<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>
<li><a href="#0" data-date="20/04/2014">20 Mar</a></li>
<li><a href="#0" data-date="20/05/2014">20 May</a></li>
<li><a href="#0" data-date="09/07/2014">09 Jul</a></li>
<li><a href="#0" data-date="30/08/2014">30 Aug</a></li>
<li><a href="#0" data-date="15/09/2014">15 Sep</a></li>
<li><a href="#0" data-date="01/11/2014">01 Nov</a></li>
<li><a href="#0" data-date="10/12/2014">10 Dec</a></li>
<li><a href="#0" data-date="19/01/2015">29 Jan</a></li>
<li><a href="#0" data-date="03/03/2015">3 Mar</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>Horizontal Timeline</h2>
<em>January 16th, 2014</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
<li data-date="28/02/2014">
<h2>Event title here</h2>
<em>February 28th, 2014</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
<li data-date="20/04/2014">
<h2>Event title here</h2>
<em>March 20th, 2014</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
<li data-date="20/05/2014">
<h2>Event title here</h2>
<em>May 20th, 2014</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
<li data-date="09/07/2014">
<h2>Event title here</h2>
<em>July 9th, 2014</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
<li data-date="30/08/2014">
<h2>Event title here</h2>
<em>August 30th, 2014</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
<li data-date="15/09/2014">
<h2>Event title here</h2>
<em>September 15th, 2014</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
<li data-date="01/11/2014">
<h2>Event title here</h2>
<em>November 1st, 2014</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
<li data-date="10/12/2014">
<h2>Event title here</h2>
<em>December 10th, 2014</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
<li data-date="19/01/2015">
<h2>Event title here</h2>
<em>January 19th, 2015</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
<li data-date="03/03/2015">
<h2>Event title here</h2>
<em>March 3rd, 2015</em>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit
recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit
dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque
quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.
</p>
</li>
</ol>
</div> <!-- .events-content -->
</section>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile.custom.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>