<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>jQuery年份时间轴滚动切换插件</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/course.css" />
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.timelinr-2.0.0.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
$(function() {
$().timelinr({
autoPlay: false,
autoPlayDirection: "forward",
startAt: 7,
mousewheel: 'true'
});
});
</script>
</head>
<body>
<div id="main">
<div id="timeline" class="timeline">
<button id="prev" class="prev">
<i class=""><img src="images/icon_time_arrow_left.png" alt=""></i>
</button>
<button id="next" class="next">
<i class=""><img src="images/icon_time_arrow_right.png" alt=""></i>
</button>
<ul id="dates" class="dates">
<li>
<a href="#2011" name="2011">2011</a>
<hr class="onepx" />
</li>
<li>
<a href="#2012">2012</a>
<hr class="onepx" />
</li>
<li>
<a href="#2013">2013</a>
<hr class="onepx" />
</li>
<li>
<a href="#2014">2014</a>
<hr class="onepx" />
</li>
<li>
<a href="#2015">2015</a>
<hr class="onepx" />
</li>
<li>
<a href="#2016">2016</a>
<hr class="onepx" />
</li>
<li>
<a href="#2017">2017</a>
<hr class="onepx" />
</li>
<li>
<a href="#2018">2018</a>
<hr class="onepx" />
</li>
</ul>
<hr class="hrLine" />
<div class="wrap">
<ul class="issues" id="issues">
<li id="2011">
<div class="left"></div>
<div class="right">
<h5>2011年</h5>
<hr class="yearLine" />
<span class="textArea">这是一段测试文本test文本。</span>
</div>
</li>
<li id="2012">
<div class="left">
<h5>2012年</h5>
<hr class="yearLine" />
<span class="textArea">这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本。</span>
</div>
<div class="right"></div>
</li>
<li id="2013">
<div class="left"></div>
<div class="right">
<h5>2013年</h5>
<hr class="yearLine" />
<span class="textArea">这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本。</span>
</div>
</li>
<li id="2014">
<div class="left">
<h5>2014年</h5>
<hr class="yearLine" />
<span class="textArea">这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本。</span>
</div>
<div class="right"></div>
</li>
<li id="2015">
<div class="left"></div>
<div class="right">
<h5>2015年</h5>
<hr class="yearLine" />
<span class="textArea">这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这一段测试文本test文本。</span>
</div>
</li>
<li id="2016">
<div class="left">
<h5>2016年</h5>
<hr class="yearLine" />
<span class="textArea">这是一段测试文本test文本;这是一段测试文本test文本。</span>
</div>
<div class="right"></div>
</li>
<li id="2017">
<div class="left"></div>
<div class="right">
<h5>2017年</h5>
<hr class="yearLine" />
<span class="textArea">这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本。</span>
</div>
</li>
<li id="2018">
<div class="left">
<h5>2018年</h5>
<hr class="yearLine" />
<span class="textArea">这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本;这是一段测试文本test文本。</span>
</div>
<div class="right"></div>
</li>
</ul>
</div>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
</div>
</body>
</html>
jQuery年份时间轴滚动切换插件.zip
版权申诉
131 浏览量
2023-09-22
00:14:37
上传
评论
收藏 148KB ZIP 举报
jQuery年份时间轴滚动切换插件.zip （14个子文件） 
js 
jquery.mousewheel.js 4KB jquery.min.js 91KB jquery.timelinr-2.0.0.js 25KB css main.css 987B course.css 2KB bootstrap.css 138KB
index.html 5KB images 
icon_time_arrow_right.png 2KB icon_time_arrow_left.png 2KB icon_pointoftime.png 622B fonts glyphicons-halflings-regular.ttf 44KB glyphicons-halflings-regular.woff 23KB glyphicons-halflings-regular.eot 20KB glyphicons-halflings-regular.woff2 18KB资源评论
