Home > Article > Web Front-end > 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:58736browse

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.

Finally, we use jQuery to make the timeline dynamic. The following is a code example:

$(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!

JavaScript jquery css html 事件

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use HTML, CSS and jQuery to implement the advanced function of sliding to delete list itemsNext article：How to use HTML, CSS and jQuery to implement the advanced function of sliding to delete list items

See more

How to make a dynamic timeline using HTML, CSS and jQuery

Related articles