您的位置：首页 > Web前端 > JQuery

jQuery时间轴特效

2015-08-26 09:54 609 查看

一 timelinr

图图：

码码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery时间轴幻灯展示特效</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="jquery.js"></script>
	<script src="jquery.timelinr-0.9.4.js" type="text/javascript"></script>
	<script type="text/javascript"> 
		$(function(){
			$().timelinr()
		});
	</script>
</head>
<body id="introduction">
<div id="page">
<div class="demotips"><a href="index.html">演示一</a><a href="demo2.html">演示二</a><a href="demo3.html">演示三</a></div>
	<div id="container" class="content clearfix">
	<div id="timeline">
		<ul id="dates">
			<li><a href="#1900">1900</a></li>
			<li><a href="#1944">1944</a></li>
			<li><a href="#1950">1950</a></li>
			<li><a href="#1971">1971</a></li>
			<li><a href="#1999">1999</a></li>
			<li><a href="#2001">2001</a></li>
			<li><a href="#2011">2011</a></li>
		</ul>
		<ul id="issues">
			<li id="1900">
				<img src="images/tu1.jpg" width="256" height="256" />
				<h1>1900</h1>
				<p>计算机诞生  计算机诞生 计算机诞生 </p>
			</li>
			<li id="1944">
				<img src="images/tu2.jpg" width="256" height="256" />
				<h1>1944</h1>
				<p>比尔诞生 比尔诞生 比尔诞生 </p>
			</li>
			<li id="1950">
				<img src="images/tu3.jpg" width="256" height="256" />
				<h1>1950</h1>
				<p>蒋帮主诞生 蒋帮主诞生 蒋帮主诞生 </p>
			</li>
			<li id="1971">
				<img src="images/tu4.jpg" width="256" height="256" />
				<h1>1971</h1>
				<p>CSDN诞生 CSDN诞生 CSDN诞生 </p>
			</li>
			<li id="1999">
				<img src="images/tu5.jpg" width="256" height="256" />
				<h1>1999</h1>
				<p>乔布斯回来了 乔布斯回来了 乔布斯回来了 </p>
			</li>
			<li id="2001">
				<img src="images/tu6.jpg" width="256" height="256" />
				<h1>2001</h1>
				<p>火星撞地球  火星撞地球 火星撞地球 </p>
			</li>
			<li id="2011">
				<img src="images/tu8.jpg" width="256" height="256" />
				<h1>2011</h1>
				<p>鄙人退隐江湖 金盆洗手</p>
			</li>
		</ul>
		<div id="grad_left"></div>
		<div id="grad_right"></div>
        <a href="#" id="next">+</a>
		<a href="#" id="prev">-</a>
	</div>
  </div>
<p align="center"></p><br>
<p align="center"></p>  
 </div> 
</div>
</body>
</html>

代码说明：

首先引入js库 jquery.timelinr-0.9.4.js

日期时间在ul li 列表中定义；

发展历史内容在另一个UL LI列表中定义；

两个UL列表套在一个id为timeline的DIV中；

so easy，将内容替换为自己要展示的发展历史之类的内容即可；

可以有横向，纵向，自动播放的时间轴效果；

下载：
http://pan.baidu.com/s/1mgMSQE0

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航