/**
* 初始化时间轴数据展示
*
* @param {} data 时间轴数据对象
*/
function initTimeAxis(data){
var timeAxisHtml = '<h1 class="title">' + data.name + '</h1>';
$.each(data.items,function(i,obj){
timeAxisHtml += '<div class="year"><h2><a href="javascript:void(0);">' + obj.year + '<i></i></a></h2>';
if(obj.items.length > 0){
timeAxisHtml += '<div class="list"><ul>';
$.each(obj.items,function(j,infoObj){
if(infoObj.important){
timeAxisHtml += '<li class="cls highlight">';
} else {
timeAxisHtml += '<li class="cls">';
}
timeAxisHtml += '<p class="date">' + infoObj.date + '</p>'
+ '<p class="intro">' + infoObj.title + '</p>'
+ '<p class="version">' + infoObj.version + '</p>';
if (infoObj.infos.length > 0) {
timeAxisHtml += '<div class="more">';
$.each(infoObj.infos,function(k,moreInfo){
timeAxisHtml += '<p>' + moreInfo + '</p>';
});
timeAxisHtml += '</div>';
}
timeAxisHtml += '</li>';
});
timeAxisHtml += '</ul></div>';
}
});
$('.main').html(timeAxisHtml);
}
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>时间轴</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta name="viewport" content="width=device-width"/>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="shortcut icon" href="images/log/clock.png" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/timeaxis.js"></script>
</head>
<body>
<div class="content">
<div class="wrapper">
<div class="light"><i></i></div>
<hr class="line-left">
<hr class="line-right">
<div class="main"></div>
</div>
</div>
</body>
<script type="text/javascript">
var data = {
name:'时间轴大事件',
items:[{
year:'2014年',
items:[{
date:'9月29日',
title:'支持透明网桥准入技术；增加审计员日志；增加警报日志',
version:'3.8.9-nac',
important:true,
infos:[
'支持透明网桥准入技术',
'支持代理服务器认证',
'支持光口设备(千兆、万兆)',
'网络配置优化',
'增加审计员日志',
'增加调试日志管理',
'增加警报日志',
'增加原始日志',
'增加系统安检的警示信息和日志记录',
'增加了警报外发模块',
'增加了警报级别管理模块',
'网络诊断工具(traceroute路由跟踪、tcpdump抓包、nslookup域名解析)'
]
},{
date:'8月10日',
title:'交换机的简单化管理(半自动添加vlan、设置/还原trunk端口)',
version:'3.8.8-nac',
important:true,
infos:[
'支持华为S5700',
'支持H3C的S2600系列',
'交换机的简单化管理(半自动添加vlan、设置/还原trunk端口)',
'license导入限制(只能使用一次)',
'防火墙、来宾用户、远程桌面检查策略的完善',
'数据库高速查询优化',
'冗余代码的整理',
'子云logo和联系方式，个性化设置',
'增加来宾隔离区管理',
'增加了用户管理中接待来宾记录',
'解决了tomcat日志文件超过100M的时候，导致CPU和内存大量占用，上下文切换严重超载的问题。'
]
}]
},{
year:'2013年',
items:[{
date:'7月18日',
title:'产品平台搭建',
version:'2.0.0-nac',
important:false,
infos:[]
}]
}]
};
initTimeAxis(data);
</script>
</html>
body {
margin:0;
font:12px Microsoft YaHei,Arial,sans-serif;
}
html,body {
-webkit-text-size-adjust:none;
background:#f7f7f7;
background: #3a3c48 url("../images/log/content-bg.png");
}
div,form,input,textarea,p,ul,li,dl,dt,dd,h1,table,h2 {
padding:0;
margin:0;
}
li {
list-style-type:none;
}
ol,ul {
list-style:none;
}
input {
vertical-align:middle;
font-size:100%;
}
img {
vertical-align:top;
border:0;
}
em,i {
font-style:normal;
}
.l {
float:left;
}
.r {
float:right;
}
.c {
clear:both;
}
.o {
overflow:hidden;
}
.left {
float:left;
}
.right {
float:right;
}
a {
color:#666;
text-decoration:none;
}
a:hover {
color:#F60;
text-decoration:underline;
}
.clearfix {
*zoom:1;
}
.clearfix:before,.clearfix:after {
display:table;
content:"";
}
.clearfix:after {
clear:both;
}
.content {
position:relative;
width:100%;
height: auto;
margin:0 auto;
}
ul, li {
list-style: none;
}
a {
text-decoration: none;
}
a:hover{
text-decoration: none;
cursor: point;
}
hr {
height: 0;
border-left: none;
border-right: 0;
border-top: 1px dashed #2d2f34;
border-bottom: 1px dashed #474954;
}
.top{
margin-top: 60px;
}
.top img{
width: 100%;
margin-top: -10px;
}
.content {
padding: 50px 0;
width: 100%;
}
.content .wrapper {
position: relative;
background: url("../images/log/release-bg.png") repeat-y right top;/*no-repeat right top*/
width: 960px;
margin: 0 auto;
}
.content .light {
position: absolute;
left: 55px;
top: -50px;
width: 152px;
height: 191px;
background: url("../images/log/light-top.png") no-repeat top center;
}
.content .light i {
position: absolute;
width: 100%;
height: 100%;
top: 0;
background: url("../images/log/light.png") no-repeat top center;
}
.content .line-left {
position: absolute;
left: 0;
top: 15px;
width: 70px;
}
.content .line-right {
position: absolute;
right: 0;
top: 15px;
width: 460px;
}
.content .main {
background: url("../images/log/line-bg.png") repeat-y 249px 0;
}
.content .main .title {
position: absolute;
line-height: 40px;
padding-left: 67px;
left: 230px;
top: 0;
color: #58a6fb;
font-size: 24px;
background: url("../images/log/clock.png") no-repeat left top;
}
.content .main .year {
position: relative;
z-index: 100;
}
.content .main .year h2 {
height: 40px;
width: 170px;
padding-right: 30px;
font-size: 24px;
line-height: 40px;
text-align: right;
}
.content .main .year h2 a {
color: #58a6fb;
}
.content .main .year h2 i{
display:block;
position:relative;
height:0;
width:0;
left:190px;
top:-20px;
border-width:6px;
border-style:solid;
border-color:#59a7fb transparent transparent transparent;
-webkit-transition:.5s;
-moz-transition:.5s;
-ms-transition:.5s;
-o-transition:.5s;
transition:.5s;
-webkit-transform-origin:6px 3px;
-moz-transform-origin:6px 3px;
-ms-transform-origin:6px 3px;
-o-transform-origin:6px 3px;
transform-origin:6px 3px
}
.content .main .year .list{
margin:10px 0;
position:relative;
overflow:hidden;
-webkit-transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s;
-moz-transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s;
-ms-transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s;
-o-transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s;
transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s
}
.content .main .year .list ul {
bottom: 0;
}
.content .main .year .list ul li {
background: url("../images/log/circle.png") no-repeat 235px 31px;
padding: 30px 0;
color: #a1a4b8;
}
.content .main .year .list ul li.highlight {
background-image: url(http://p4.qhimg.com/d/inn/05a63fc5/circle-h.png);
}
.cls {
zoom: 1;
}
.cls:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.content .main .year .list ul li.highlight .date, .content .main .year .list ul li.highlight .intro {
color: #ec6a13;
}
.content .main .year .list ul li .date,.content .main .year .list ul li .version{
float:left;
display:block;
clear:left;
width:200px;
line-height:24px;
text-align:right
}
.content .main .year .list ul li .date{
font-size:18px;
line-height:32px;
color:#bec1d5
}
.content .main .year .list ul li .intro, .content .main .year .list ul li .more {
float: left;
display: block;
width: 600px;
margin-left: 100px;
line-height: 24px;
}
.content .main .year .list ul li .intro {
font-size: 18px;
line-height: 32px;
color: #63d029;
}
.content .wrapper:first-child .main .year.close h2 i{
transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
-o-transform:rotate(-90deg)
}
.content .wrapper:first-child .main .year.close .list{
opacity:0;
height:0!important;
}
.content .main .year h2 i{
*left:40px /* *：IE6/7识别的样式； _:仅IE6识别*/
}
原文地址：http://blog.csdn.net/luo201227/article/details/39929173
