3-8进度条

 var enableProgressDrag = function() {
    var progressDrag = false;
    $('.progress').on('mousedown', function(e) {
      progressDrag = true;
      updateProgress(e.pageX);
    });
    $(document).on('mouseup', function(e) {
      if(progressDrag) {
        progressDrag = false;
        updateProgress(e.pageX);
      }
    });
    $(document).on('mousemove', function(e) {
      if(progressDrag) {
        updateProgress(e.pageX);
      }
    });
  };
  看不懂这块的逻辑。

他人即地狱_ 2017-12-02

源自：HTML5音视频 3-8 js实现进度条可拖拽效果

收起

1回答

小于飞飞 2017-12-03 13:59:01

三个状态鼠标按下、抬起、移动，来更新进度条。
 var enableProgressDrag = function() {
    var progressDrag = false;  //定义是否拖拽变量，false没拖拽，true拖拽
    $('.progress').on('mousedown', function(e) { // 鼠标按下时
      progressDrag = true; // true,可以拖拽
      updateProgress(e.pageX);  // 更新进度条值
    });
    $(document).on('mouseup', function(e) { //鼠标抬起时
      if(progressDrag) {  // 如果true,将progressDrag设置为false, 
        progressDrag = false;
        updateProgress(e.pageX); // 更新进度条值
      }
    });
    $(document).on('mousemove', function(e) { //鼠标移动时
      if(progressDrag) {
        updateProgress(e.pageX); // 更新进度条值
      }
    });
  };

在体会下

收起回答