jquery 时间线

jQuery 时间线实现方法

使用 jQuery 创建一个时间线可以通过多种方式实现，以下是一种常见的方法：

HTML 结构

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-date">2023-01-01</div>
    <div class="timeline-content">事件1描述</div>
  </div>
  <div class="timeline-item">
    <div class="timeline-date">2023-02-15</div>
    <div class="timeline-content">事件2描述</div>
  </div>
</div>

CSS 样式

.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #333;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}
.timeline-item {
  padding: 10px 40px;
  position: relative;
  width: 50%;
  box-sizing: border-box;
}
.timeline-item::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: white;
  border: 4px solid #FF9F55;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}
.left {
  left: 0;
}
.right {
  left: 50%;
}
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

jQuery 代码

$(document).ready(function() {
  $('.timeline-item').each(function(index) {
    if (index % 2 === 0) {
      $(this).addClass('left');
    } else {
      $(this).addClass('right');
    }
  });

  // 添加动画效果
  $('.timeline-item').hide().each(function(i) {
    $(this).delay(i * 300).fadeIn(500);
  });
});

响应式时间线实现

对于移动设备，可以调整时间线布局：

$(window).resize(function() {
  if ($(window).width() < 768) {
    $('.timeline-item').removeClass('left right').addClass('mobile');
    $('.timeline::after').css('left', '31px');
  } else {
    $('.timeline-item').removeClass('mobile');
    $('.timeline::after').css('left', '50%');
    $('.timeline-item').each(function(index) {
      if (index % 2 === 0) {
        $(this).addClass('left');
      } else {
        $(this).addClass('right');
      }
    });
  }
}).trigger('resize');

时间线插件推荐

如果需要更复杂的功能，可以考虑以下 jQuery 插件：

• Timeliny：轻量级响应式时间线插件
• Vertical Timelines：垂直布局时间线
• jQuery Timeline：支持多种动画效果

这些插件通常提供更多自定义选项和交互功能，适合需要高级功能的项目。