水平时间轴(Horizontal Timeline)是一种用户界面元素,用于展示一系列事件或数据点,并按照时间顺序排列。这种时间轴通常以水平条形图的形式呈现,用户可以通过滑动或点击来查看不同时间点的信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Timeline with jQuery</title>
<style>
.timeline {
display: flex;
overflow-x: auto;
border-top: 2px solid #ccc;
padding: 20px;
}
.timeline-item {
margin-right: 20px;
position: relative;
}
.timeline-item:last-child {
margin-right: 0;
}
.timeline-item::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 2px;
background-color: #ccc;
}
.timeline-item::after {
content: attr(data-date);
position: absolute;
top: -20px;
left: 0;
font-size: 14px;
color: #666;
}
</style>
</head>
<body>
<div class="timeline">
<div class="timeline-item" data-date="2020-01-01">Event 1</div>
<div class="timeline-item" data-date="2020-03-15">Event 2</div>
<div class="timeline-item" data-date="2020-06-30">Event 3</div>
<div class="timeline-item" data-date="2020-09-20">Event 4</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('.timeline').on('scroll', function() {
console.log('Scrolling...');
});
});
</script>
</body>
</html>
通过以上内容,你应该对水平时间轴及其在jQuery中的实现有了全面的了解。如果有更多具体问题,欢迎继续提问。