How to make a dynamic timeline using HTML, CSS and jQuery-JS Tutorial-php.cn

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

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:

   动态时间轴    
      事件1
 事件1的详细描述
 
 
   事件2
 事件2的详细描述
 
 
   事件3
 事件3的详细描述

Copy after login

In the above HTML code, we created a.timelinecontainer, which contains a.timeline-itemscontainer and a.timeline-progressProgress bar..timeline-itemsThe 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%); }

Copy after login

In the above CSS code, we set the basic style of the.timelinecontainer and beautify.timeline-itemand ## 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); }); });

Copy after login

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!