jquery 时间轴

以下是关于使用 jQuery 创建时间轴的几种常见方法和技术实现：

基础 HTML 结构

时间轴通常由时间节点和内容组成，HTML 结构可采用列表形式：

<div class="timeline">
  <ul>
    <li>
      <div class="timeline-content">
        <h3>2023</h3>
        <p>事件描述内容</p>
      </div>
    </li>
    <!-- 更多时间节点 -->
  </ul>
</div>

CSS 样式设计

时间轴需要基础样式实现视觉布局，以下为垂直时间轴示例：

.timeline ul {
  padding: 1em 0;
  position: relative;
}
.timeline ul::before {
  content: '';
  width: 2px;
  height: 100%;
  background: #ccc;
  position: absolute;
  left: 50%;
}
.timeline li {
  width: 50%;
  padding: 15px;
  position: relative;
}
.timeline li:nth-child(odd) {
  float: left;
  text-align: right;
}
.timeline li:nth-child(even) {
  float: right;
}

jQuery 动态交互

通过 jQuery 实现时间轴的动态效果，如点击展开详情：

$(document).ready(function() {
  $('.timeline-content').click(function() {
    $(this).find('p').slideToggle();
  });
});

响应式适配

使用 jQuery 检测窗口大小并调整时间轴布局：

$(window).resize(function() {
  if ($(window).width() < 768) {
    $('.timeline ul::before').css('left', '30px');
    $('.timeline li').css('width', '100%').css('text-align', 'left');
  }
});

插件推荐

如需快速实现高级功能，可考虑以下 jQuery 插件：

• Timelinely：支持多媒体内容嵌入
• Vertical Timeline：专注垂直布局
• jQuery Timeline：提供多种动画效果

以上方法可根据实际需求组合使用，通过调整 HTML 结构和 CSS 样式可实现水平时间轴或其他变体。jQuery 主要用于增强交互性，核心布局仍依赖 CSS 实现。