Heim >Web-Frontend >js-Tutorial >So erstellen Sie eine dynamische Zeitleiste mit HTML, CSS und jQuery
So erstellen Sie eine dynamische Zeitleiste mit HTML, CSS und jQuery
- WBOYOriginal
- 2023-10-24 09:31:58857Durchsuche
Um mit HTML, CSS und jQuery eine dynamische Zeitleiste zu erstellen, sind bestimmte Codebeispiele erforderlich.
Die Zeitleiste ist eine gängige Methode zur Anzeige der chronologischen Abfolge und des Ereignisflusses und eignet sich sehr gut zur Anzeige historischer Ereignisse und des Projektfortschritts Warten. Mithilfe der HTML-, CSS- und jQuery-Technologie können Sie ganz einfach einen dynamischen Timeline-Effekt erstellen. In diesem Artikel wird erläutert, wie Sie mit diesen Techniken einen einfachen Timeline-Effekt erzielen, und es werden spezifische Codebeispiele bereitgestellt.
Zuerst müssen wir eine grundlegende Timeline-Struktur in HTML erstellen. Das Folgende ist ein Codebeispiel:
<!DOCTYPE html>
<html>
<head>
<title>动态时间轴</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="timeline">
<div class="timeline-items">
<div class="timeline-item">
<div class="timeline-item-content">
<h2>事件1</h2>
<p>事件1的详细描述</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-content">
<h2>事件2</h2>
<p>事件2的详细描述</p>
</div>
</div>
<div class="timeline-item">
<div class="timeline-item-content">
<h2>事件3</h2>
<p>事件3的详细描述</p>
</div>
</div>
</div>
<div class="timeline-progress"></div>
</div>
</body>
</html>Im obigen HTML-Code haben wir einen .timeline-Container erstellt, der einen .timeline-items-Container und einen enthält .timeline-progressFortschrittsbalken. Der Container .timeline-items wird verwendet, um Ereignisse auf der Zeitleiste zu platzieren. Jedes Ereignis wird durch .timeline-item dargestellt, und die Details des Ereignisses werden in .timeline-item-contentcontainer. .timeline容器，里面包含了一个.timeline-items容器和一个.timeline-progress进度条。.timeline-items容器用来放置时间轴上的事件，每个事件用.timeline-item表示，事件的详细内容放在.timeline-item-content容器中。
接下来，我们使用CSS样式来美化时间轴的外观。以下是代码示例：
.timeline {
position: relative;
margin: 50px auto;
width: 800px;
}
.timeline-items {
position: relative;
}
.timeline-item {
position: relative;
margin-bottom: 50px;
padding: 20px;
background: #f1f1f1;
}
.timeline-item-content {
display: inline-block;
vertical-align: top;
}
.timeline-progress {
position: absolute;
width: 4px;
background: #666;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}上面的CSS代码中，我们设置了.timeline容器的基本样式，并美化了.timeline-item和.timeline-progress
$(document).ready(function() {
var timelineItems = $(".timeline-items .timeline-item");
var progress = $(".timeline-progress");
// 设置进度条的初始位置
progress.css("height", timelineItems.length * 100);
// 监听滚动事件，更新进度条位置
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();
var windowHeight = $(this).height();
var documentHeight = $(document).height();
var timelineOffset = $(".timeline").offset().top;
var progressHeight = windowHeight * ((scrollTop - timelineOffset) / (documentHeight - windowHeight));
progress.css("top", scrollTop - timelineOffset);
progress.css("height", progressHeight);
});
});Im obigen CSS-Code legen wir den Grundstil des .timeline-Containers fest und verschönern .timeline-item und . Das Erscheinen von timeline-progress. Abschließend verwenden wir jQuery, um die Zeitleiste dynamisch zu gestalten. Das Folgende ist ein Codebeispiel: rrreee
Im obigen JavaScript-Code verwenden wir die jQuery-Bibliothek, um dynamische Effekte zu erzielen. Insbesondere haben wir das Scroll-Ereignis abgehört, die Position des Fortschrittsbalkens basierend auf der Scroll-Distanz und der Höhe der Seite berechnet und die Höhe des Fortschrittsbalkens in Echtzeit aktualisiert. 🎜🎜Mit den oben genannten HTML-, CSS- und jQuery-Codes haben wir erfolgreich einen dynamischen Timeline-Effekt implementiert. Sie können den Stil und den Ereignisinhalt entsprechend Ihren eigenen Anforderungen ändern, um die Zeitleiste besser an Ihre tatsächliche Anwendung anzupassen. Ich hoffe, dieser Artikel ist hilfreich für Sie! 🎜Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine dynamische Zeitleiste mit HTML, CSS und jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!