网页中使用 HTML、CSS、JavaScript 打造生动时间线：专业指南

2023-10-19 19:39:33

网站时间线：使用 HTML、CSS 和 JavaScript 创建交互式历史记录

垂直时间线：梳理时间流

垂直时间线是网页时间线中最常见的一种，其将条目垂直排列，使用日期或其他标识符标记时间顺序。这种格式直观易懂，适合展示事件或项目发展过程。

HTML 代码示例：

<ul>
  <li>2023 年 1 月：推出新产品</li>
  <li>2023 年 3 月：获得风投融资</li>
  <li>2023 年 5 月：发布重大更新</li>

水平时间线：横向展现历史

水平时间线将条目横向排列，使用箭头或其他标识符表示时间顺序。这种格式可以更清楚地展示事件之间的关系和时间跨度。

HTML 代码示例：

<ul class="timeline-horizontal">
  <li>
    <div class="timeline-item">
      <span class="timeline-date">2023 年 1 月</span>
      <p>推出新产品</p>
    </div>
  </li>
  <li>
    <div class="timeline-item">
      <span class="timeline-date">2023 年 3 月</span>
      <p>获得风投融资</p>
    </div>
  </li>

响应式时间线：适配各种设备

响应式时间线根据屏幕尺寸自动调整布局和大小，确保在不同设备上都能清晰呈现。这对于移动设备和平板电脑等小屏幕设备至关重要。

CSS 代码示例：

@media (max-width: 768px) {
  .timeline {
    width: 100%;
    margin: 0 auto;
  }

  .timeline-item {
    float: none;
    width: 100%;
  }
}

自适应时间线：根据用户操作调整

自适应时间线允许用户根据自己的兴趣调整内容和顺序。例如，用户可以单击或悬停在条目上以显示更多信息，或过滤特定事件或时期。

JavaScript 代码示例：

document.querySelectorAll('.timeline-item').forEach(item => {
  item.addEventListener('click', function() {
    this.classList.toggle('active');

    const details = this.querySelector('.timeline-details');
    details.classList.toggle('hidden');
  });
});

互动时间线：让历史活跃起来

互动时间线允许用户通过单击或悬停来与时间线条目交互。这种交互性让时间线更加生动有趣，增强用户体验。

CSS 代码示例：

.timeline-item:hover {
  background-color: #efefef;
  cursor: pointer;
}

动画时间线：赋予历史生命力

动画时间线使用动画效果呈现时间线条目，营造出一种更具吸引力和动态感的时间流。

JavaScript 代码示例：

const timeline = document.querySelector('.timeline');
const items = timeline.querySelectorAll('.timeline-item');

items.forEach(item => {
  item.addEventListener('mouseenter', function() {
    this.classList.add('animated', 'fadeInUp');
  });

  item.addEventListener('mouseleave', function() {
    this.classList.remove('animated', 'fadeInUp');
  });
});