📅 最后修改于: 2023-12-03 15:10:28.760000 🧑 作者: Mango
时间轴是网站和应用程序中常用的一种交互式效果，它基于时间顺序呈现数据或事件。JavaScript是实现时间轴的一种流行方法，它可以帮助您创建各种类型的时间轴，从简单的静态时间轴到复杂的动态时间轴。
下面是一个基本的时间轴示例，它使用JavaScript和CSS来呈现一组数据按时间显示：
<html>
<head>
<title>基本时间轴</title>
<style>
.timeline {
list-style: none;
padding: 0;
margin: 50px 0;
position: relative;
}
.timeline li {
position: relative;
width: 50%;
padding: 50px 0;
margin: auto;
}
.timeline li:before,
.timeline li:after {
content: "";
display: table;
}
.timeline li:after {
clear: both;
}
.timeline li .timeline-panel {
position: relative;
float: right;
width: 45%;
padding: 20px;
background: #fff;
border: 1px solid #d4d4d4;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.timeline li .timeline-panel:before {
right: 100%;
top: 26px;
content: " ";
height: 0;
width: 0;
position: absolute;
border-top: 26px solid transparent;
border-right: 0 solid #d4d4d4;
border-bottom: 26px solid transparent;
}
.timeline li .timeline-panel:after {
right: 100%;
top: 27px;
content: " ";
height: 0;
width: 0;
position: absolute;
border-top: 27px solid transparent;
border-right: 0 solid #fff;
border-bottom: 27px solid transparent;
}
.timeline li .timeline-badge {
color: #fff;
width: 50px;
height: 50px;
line-height: 50px;
font-size: 1.4em;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: #999999;
z-index: 100;
border-radius: 50%;
border: 1px solid #d4d4d4;
}
.timeline li .timeline-badge i {
color: #fff;
}
.timeline li .timeline-panel.noarrow:before {
display: none;
}
.timeline li .timeline-panel.noarrow:after {
display: none;
}
.timeline li.timeline-inverted .timeline-panel {
float: left;
}
.timeline li.timeline-inverted .timeline-badge {
left: 50%;
margin-left: -25px;
}
</style>
</head>
<body>
<ul class="timeline">
<li>
<div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">事件标题</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 11小时以前</small></p>
</div>
<div class="timeline-body">
<p>事件内容</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge warning"><i class="glyphicon glyphicon-credit-card"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">事件标题</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 12小时以前</small></p>
</div>
<div class="timeline-body">
<p>事件内容</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge danger"><i class="glyphicon glyphicon-credit-card"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">事件标题</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 13小时以前</small></p>
</div>
<div class="timeline-body">
<p>事件内容</p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="timeline-badge success"><i class="glyphicon glyphicon-credit-card"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">事件标题</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 14小时以前</small></p>
</div>
<div class="timeline-body">
<p>事件内容</p>
</div>
</div>
</li>
<li>
<div class="timeline-badge"><i class="glyphicon glyphicon-check"></i></div>
<div class="timeline-panel">
<div class="timeline-heading">
<h4 class="timeline-title">事件标题</h4>
<p><small class="text-muted"><i class="glyphicon glyphicon-time"></i> 15小时以前</small></p>
</div>
<div class="timeline-body">
<p>事件内容</p>
</div>
</div>
</li>
</ul>
</body>
</html>
这段代码使用了Bootstrap框架的样式和图标，但您可以自由选择任何样式。
下面是一个使用JavaScript动态创建时间轴的示例代码：
<html>
<head>
<title>动态时间轴</title>
<style>
#timeline {
position: relative;
margin: 50px auto;
padding: 30px 0;
width: 700px;
height: 400px;
background: #f5f5f5;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,.3);
overflow: hidden;
}
.tl-item {
position: absolute;
width: 100%;
height: 100px;
background: #fff;
color: #444;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,.3);
z-index: 100;
transition: all .3s ease-out;
}
.tl-date {
display: inline-block;
margin: 20px 30px 0;
color: #aaa;
font-size: 20px;
}
.tl-content {
display: inline-block;
margin: 20px 30px;
vertical-align: top;
width: 60%;
}
.tl-image {
display: inline-block;
margin: 20px 0;
vertical-align: top;
width: 35%;
height: 100px;
background: #ddd;
border-radius: 5px;
overflow: hidden;
}
.tl-image img {
max-width: 100%;
max-height: 100%;
display: block;
margin: 0 auto;
border: 0;
padding: 0;
height: auto;
width: auto;
}
.tl-item.active {
z-index: 200;
transform: scale(1.02);
box-shadow: 0 4px 8px rgba(0,0,0,.4);
}
.tl-item.left {
left: 40%;
transform: translateX(-50%);
}
.tl-item.right {
right: 40%;
transform: translateX(50%);
}
</style>
</head>
<body>
<div id="timeline">
</div>
<script>
var items = [{
"date": "2022-05-01",
"text": "事件标题",
"content": "事件内容",
"image": ""
}, {
"date": "2022-06-01",
"text": "事件标题",
"content": "事件内容",
"image": ""
}, {
"date": "2022-07-01",
"text": "事件标题",
"content": "事件内容",
"image": ""
}, {
"date": "2022-08-01",
"text": "事件标题",
"content": "事件内容",
"image": ""
}, {
"date": "2022-09-01",
"text": "事件标题",
"content": "事件内容",
"image": ""
}];
function createTimeline(items) {
var timeline = document.getElementById("timeline");
for (var i = 0; i < items.length; i++) {
var item = items[i];
var className = "tl-item";
className += (i % 2 === 0) ? " left" : " right";
var image = "";
if (item.image) {
image = '<div class="tl-image"><img src="' + item.image + '"></div>';
}
var html = '<div class="' + className + '">' +
'<div class="tl-date">' + item.date + '</div>' +
'<div class="tl-content">' +
'<h3>' + item.text + '</h3>' +
'<p>' + item.content + '</p>' +
'</div>' + image +
'</div>';
timeline.innerHTML += html;
}
var tlItems = document.getElementsByClassName("tl-item");
for (var i = 0; i < tlItems.length; i++) {
tlItems[i].addEventListener("click", function () {
for (var i = 0; i < tlItems.length; i++) {
tlItems[i].classList.remove("active");
}
this.classList.add("active");
});
}
}
createTimeline(items);
</script>
</body>
</html>
这个示例显示了一个简单的时间轴，其中包含一些事件和图像。当您单击事件时，它会变成活动状态，并显示一个放大动画。
时间轴是一种非常有用的可视化工具，可用于呈现数据、事件或进程。使用JavaScript，您可以轻松地创建反应灵敏的时间轴，使您的网站和应用程序更加交互式。