3-8进度条

来源：3-8 js实现进度条可拖拽效果

他人即地狱_

2017-12-02 18:04:26

 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);
      }
    });
  };
  看不懂这块的逻辑。

写回答

1回答

小于飞飞

2017-12-03

三个状态鼠标按下、抬起、移动，来更新进度条。
 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); // 更新进度条值
      }
    });
  };

在体会下

0 学习 · 5012 问题

查看课程

相似问题

进度条拖拽问题

回答 2

没有进度条的效果

回答 2

我的进度条为什么拖动不了

回答 3

6:26处进度条跳变问题

回答 1

回答 2

打开慕课网App查看更多内容