Maison >interface Web >js tutoriel >Comment créer une chronologie dynamique en utilisant HTML, CSS et jQuery
Comment créer une chronologie dynamique en utilisant HTML, CSS et jQuery
- WBOYoriginal
- 2023-10-24 09:31:58855parcourir
Comment utiliser HTML, CSS et jQuery pour créer une chronologie dynamique, des exemples de code spécifiques sont requis
La chronologie est un moyen courant d'afficher la séquence chronologique et le flux des événements, et est très appropriée pour afficher les événements historiques et l'avancement du projet attendez. Grâce aux technologies HTML, CSS et jQuery, vous pouvez facilement créer un effet de chronologie dynamique. Cet article explique comment utiliser ces techniques pour obtenir un effet de chronologie simple et fournit des exemples de code spécifiques.
Tout d’abord, nous devons créer une structure chronologique de base en HTML. Voici un exemple de code :
<!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>Dans le code HTML ci-dessus, nous avons créé un conteneur .timeline, qui contient un conteneur .timeline-items et un .timeline-progressBarre de progression. Le conteneur .timeline-items est utilisé pour placer des événements sur la chronologie. Chaque événement est représenté par .timeline-item, et les détails de l'événement sont placés dans .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);
});
});Dans le code CSS ci-dessus, nous définissons le style de base du conteneur .timeline et embellissons .timeline-item et . L'apparition de la chronologie-progression. Enfin, nous utilisons jQuery pour rendre la timeline dynamique. Voici un exemple de code : rrreee
Dans le code JavaScript ci-dessus, nous utilisons la bibliothèque jQuery pour obtenir des effets dynamiques. Plus précisément, nous avons écouté l'événement de défilement, calculé la position de la barre de progression en fonction de la distance de défilement et de la hauteur de la page, et mis à jour la hauteur de la barre de progression en temps réel. 🎜🎜Avec les codes HTML, CSS et jQuery ci-dessus, nous avons réussi à implémenter un effet de chronologie dynamique. Vous pouvez modifier le style et le contenu de l'événement en fonction de vos propres besoins pour rendre la chronologie plus cohérente avec votre application réelle. J'espère que cet article vous aidera ! 🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!