Home >Web Front-end >JS Tutorial >How to make a dynamic timeline using HTML, CSS and jQuery
How to make a dynamic timeline using HTML, CSS and jQuery
- WBOYOriginal
- 2023-10-24 09:31:58857browse
How to use HTML, CSS and jQuery to make a dynamic timeline, specific code examples are required
Timeline is a common way to display the time sequence and event flow method, very suitable for displaying historical events, project progress, etc. Using HTML, CSS and jQuery technology, you can easily create a dynamic timeline effect. This article will introduce how to use these techniques to achieve a simple timeline effect and provide specific code examples.
First, we need to create a basic timeline structure in HTML. The following is a code example:
<!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>In the above HTML code, we created a .timeline container, which contains a .timeline-items container and a .timeline-progressProgress bar. .timeline-items The container is used to place events on the timeline. Each event is represented by .timeline-item, and the details of the event are placed in .timeline-item- contentContainer.
Next, we use CSS styles to beautify the appearance of the timeline. The following is a code example:
.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%);
}In the above CSS code, we set the basic style of the .timeline container and beautify .timeline-item and ## The appearance of #.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);
});
});In the above JavaScript code, we use the jQuery library to achieve dynamic effects. Specifically, we listened to the scroll event, calculated the position of the progress bar based on the scroll distance and the height of the page, and updated the height of the progress bar in real time. Through the above HTML, CSS and jQuery code, we have successfully achieved a dynamic timeline effect. You can modify the style and event content according to your own needs to make the timeline more consistent with your actual application. Hope this article is helpful to you! The above is the detailed content of How to make a dynamic timeline using HTML, CSS and jQuery. For more information, please follow other related articles on the PHP Chinese website!