jQuery动画垂直时间轴特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery动画垂直时间轴特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<title>jQuery动画垂直时间轴特效代码</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
	$(".timeline").eq(0).animate({
		height:'600px'
	},3000);
});
</script>

<link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>


<div class="timeline">
	<div class="timeline-date">
		<ul>
			<h2 class="second" style="position: relative;">
				<span>2013年</span>
			</h2>
			<li>
				<h3>09.03<span>2013</span></h3>
				<dl class="right">
					<span>时间轴就要成功了！</span>
				</dl>
			</li>
			<li>
				<h3>08.15<span>2013</span></h3>
				<dl class="right">
					<span>为了时间轴奋斗吧！</span>
				</dl>
			</li>
		</ul>
	</div>
	<div class="timeline-date">
		<ul>
			<h2 class="second" style="position: relative;">
				<span>2012年</span>
			</h2>
			<li>
				<h3>09.03<span>2012</span></h3>
				<dl class="right">
					<span>那一年的今天！</span>
				</dl>
			</li>
			<li>
				<h3>08.15<span>2012</span></h3>
				<dl class="right">
					<span>前端之路慢慢修远！</span>
				</dl>
			</li>
		</ul>
	</div>
</div>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";body,h2,ul,h3{padding:0;margin:0;}
ul{list-style:none outside none;}
/* timeline */
.timeline{background:url("../images/line4.png") repeat-y 50px 0;overflow:hidden;position:relative;height:100px;margin:20px 10px;width:520px;margin:40px auto 0 auto;}
.timeline-date{overflow:hidden;position:relative;}
.timeline-date h2{background:url("../images/icon9.png") no-repeat 10px 0;height:87px;margin-bottom:20px;}
.timeline-date h2 span{color:#999999;display:inline-block;font-size:22px;margin:30px 0px 0 110px;}
.timeline-date ul li{background:url("../images/icon7.png") no-repeat 42px 5px;zoom:1;height:70px;}
.timeline-date ul li h3{float:left;text-align:right;font-size:14px;color:#878787;display:block;}
.timeline-date ul li h3 span{display:block;color:#ADADAD;font-size:12px;padding-left:15px;}
.timeline-date ul li dl{margin-top:-5px;}
.timeline-date ul li dl.right{background:url() no-repeat 0 0;float:left;margin-left:35px;margin-top:-5px;display:block;background-color:#FFBB42;height:40px;width:216px;}
.timeline-date ul li dl span{display:block;font-size:16px;padding:0px 10px 0px 30px;color:#fff;line-height:40px;}

附件:下载该文件资源,减少时间成本(增值服务)