jquery 纵向时间轴

基础概念

jQuery纵向时间轴是一种使用jQuery库创建的可视化时间线，它允许用户以垂直方向浏览和交互时间序列数据。这种时间轴通常用于展示历史事件、项目进度、里程碑或其他按时间顺序排列的信息。

优势

易于实现：利用jQuery的强大选择器和动画功能，可以快速搭建时间轴。
高度可定制：可以通过CSS和JavaScript轻松调整样式和行为。
交互性强：用户可以点击或滑动查看不同时间点的信息。
响应式设计：适应不同屏幕尺寸，提供良好的用户体验。

类型

静态时间轴：展示固定时间点的信息，不可交互。
动态时间轴：根据用户操作动态加载和展示内容。
交互式时间轴：允许用户通过点击、滑动等方式与时间轴互动。

应用场景

历史事件回顾
项目进度跟踪
产品发布记录
教育培训课程安排

示例代码

以下是一个简单的jQuery纵向时间轴示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Vertical Timeline</title>
    <style>
        .timeline {
            list-style: none;
            padding: 0;
            position: relative;
        }
        .timeline:before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 6px;
            background: #ddd;
            left: 50%;
            margin-left: -3px;
        }
        .timeline li {
            position: relative;
            margin-bottom: 20px;
        }
        .timeline li:before {
            content: attr(data-date);
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
            font-weight: bold;
        }
        .timeline li .timeline-content {
            background: #fff;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <ul class="timeline">
        <li data-date="2020-01-01">
            <div class="timeline-content">
                <h3>Event 1</h3>
                <p>Description of event 1...</p>
            </div>
        </li>
        <li data-date="2020-02-01">
            <div class="timeline-content">
                <h3>Event 2</h3>
                <p>Description of event 2...</p>
            </div>
        </li>
        <li data-date="2020-03-01">
            <div class="timeline-content">
                <h3>Event 3</h3>
                <p>Description of event 3...</p>
            </div>
        </li>
    </ul>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 可以在这里添加更多的交互逻辑
        });
    </script>
</body>
</html>