将标记和指示器添加到时间线

时间线是一个流行的Web设计元素，可以帮助您以极简主义的方式展示产品或企业历史、事件、进程等内容。标记和指示器是时间线中最常见的两个元素，它们可以帮助用户轻松地浏览时间线，并快速找到自己感兴趣的内容。

在这个教程中，我们将介绍如何使用HTML、CSS和JavaScript将标记和指示器添加到时间线中。

1. 创建时间线的基本结构

在HTML中，我们可以使用无序列表 <ul> 来创建时间线的基本结构。每个时间点可以使用一个列表项 <li> 来表示，该列表项包含一个标题、一个描述和一个可选的图片。

<ul class="timeline">
  <li>
    <div class="timeline-element">
      <h3>这是一个标题</h3>
      <p>这是一个描述</p>
      <img src="image.jpg" alt="图片描述">
    </div>
  </li>
  <li>
    <div class="timeline-element">
      <h3>这是另一个标题</h3>
      <p>这是另一个描述</p>
    </div>
  </li>
  <!-- 更多列表项 -->
</ul>

2. 添加标记

现在，我们可以向列表项 <li> 中添加标记元素。标记可以是圆形或方形，通常位于每个时间点的左侧。我们可以使用CSS设置标记的样式，包括大小、颜色、边框等等。

<ul class="timeline">
  <li>
    <div class="timeline-marker timeline-marker-circle"></div>
    <div class="timeline-element">
      <h3>这是一个标题</h3>
      <p>这是一个描述</p>
      <img src="image.jpg" alt="图片描述">
    </div>
  </li>
  <li>
    <div class="timeline-marker timeline-marker-square"></div>
    <div class="timeline-element">
      <h3>这是另一个标题</h3>
      <p>这是另一个描述</p>
    </div>
  </li>
  <!-- 更多列表项 -->
</ul>

<style>
.timeline-marker {
  width: 10px;
  height: 10px;
  margin-right: 10px;
  display: inline-block;
  border-radius: 50%;
  background-color: #333;
}
.timeline-marker-circle {
  border: 2px solid #333;
}
.timeline-marker-square {
  border: 2px solid #333;
  border-radius: 0;
}
</style>

3. 添加指示器

指示器是一个元素，通常位于时间线的顶部或底部，可以指示用户当前所处的时间点。我们可以使用JavaScript计算当前滚动位置，并相应地高亮当前时间点。

<div class="timeline-wrapper">
  <div class="timeline-indicator"></div>
  <ul class="timeline">
    <li>
      <div class="timeline-marker timeline-marker-circle"></div>
      <div class="timeline-element">
        <h3>这是一个标题</h3>
        <p>这是一个描述</p>
        <img src="image.jpg" alt="图片描述">
      </div>
    </li>
    <li>
      <div class="timeline-marker timeline-marker-square"></div>
      <div class="timeline-element">
        <h3>这是另一个标题</h3>
        <p>这是另一个描述</p>
      </div>
    </li>
    <!-- 更多列表项 -->
  </ul>
</div>

<style>
.timeline-marker {
  width: 10px;
  height: 10px;
  margin-right: 10px;
  display: inline-block;
  border-radius: 50%;
  background-color: #333;
}
.timeline-marker-circle {
  border: 2px solid #333;
}
.timeline-marker-square {
  border: 2px solid #333;
  border-radius: 0;
}
.timeline-wrapper {
  position: relative;
}
.timeline-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background-color: #333;
  transform: translateX(-50%);
}
</style>

<script>
// 计算当前滚动位置
window.addEventListener('scroll', () => {
  const timeline = document.querySelector('.timeline');
  const indicator = document.querySelector('.timeline-indicator');
  const first = timeline.firstElementChild.getBoundingClientRect().top;
  const last = timeline.lastElementChild.getBoundingClientRect().bottom;
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  const visible = Math.min(Math.max(scrollTop - first, 0), last - first);
  const total = last - first;
  const percentage = visible / total;
  const width = timeline.offsetWidth;
  indicator.style.left = `${width * percentage}px`;
});
</script>

现在您已经可以创建一个带有标记和指示器的时间线了！根据需要修改样式，添加更多列表项，以及实现更复杂的交互和动画效果。