jQuery带播放进度的时间轴样式

带播放进度条的时间轴样式，在多媒体播放、课程进度展示这些场景里，真的挺实用。用jQuery来搞，逻辑清晰、上手快，适合想快速实现交互效果的你。

时间轴的 HTML 结构其实蛮，

+
• 套个.progress-bar就行。样式那块，用 CSS 控制一下进度条宽度、颜色，配点transition过渡，视觉效果就到位了。

  动态更新的逻辑主要靠两个点：初始化的时候给每个点设置宽度，播放过程中用函数监听当前播放时间来改进度条宽度。代码量不多，但挺直观的。比如：

  $('.timeline li').each(function() {
    var timeAtPoint = $(this).data('time');
    var percentage = (timeAtPoint / totalTime) * 100;
    $(this).find('.progress-bar').width(percentage + '%');
  });

  播放时动态更新就靠这个函数：

  function playProgress(currentTime) {
    $('.timeline li .progress-bar').each(function() {
      var timeAtPoint = $(this).parent().data('time');
      if (currentTime >= timeAtPoint) {
        var percentage = (timeAtPoint / totalTime) * 100;
        $(this).width(percentage + '%');
      }
    });
  }

  哦对了，样式记得加transition，动画过渡才自然。文件包texiao7229_1560680998里应该有完整代码，你可以直接改着用。想扩展功能，比如加暂停、快进这些，也挺方便。

  如果你也在搞视频播放页面、课程节点展示这类东西，可以试试这个方案，蛮顺手的。再不济，也能学几招怎么用 jQuery 动态改样式。