js制作自定义控件——进度条的拖动和点击

就只写进度条了

HTML部分

<div class="progress">
  <div class="progress_bg">
    <div class="video_progress"></div>
  </div>
  <div class="progress_btn"></div>
</div>

CSS部分（用less写的）

// 进度条
.progress {
  position: relative;
  bottom: 65px;
  width: 1200px;
  .progress_bg {
    height: 3px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1);
    transition: 0.2s;
    .video_progress {
      background-color: #31c27c;
      width: 0;
      // height: 3px;
      height: 100%;
    }
  }
  .progress_btn {
    width: 13px;
    height: 13px;
    position: absolute;
    background-color: #fff;
    left: 0px;
    top: -4px;
    margin-left: -9px;
    cursor: pointer;
    border-radius: 50%;
    transform: scale(0);
    // transition: 0.2s;
  }
}

JS部分

(function () {
    $(".progress").on("click", function (e) {
      e.stopPropagation();
    })
    $(".player_mask").on("click",function (e) {
      e.stopPropagation();
    })
    // 进度条的hover效果
    $(".progress").hover(function () {
      $(".progress_bg").css({
        "transform": "scaleY(2)"
      });
      $(".progress_btn").fadeIn();
      $(".progress_btn").css("transform", "scale(1)");
    }, function () {
      $(".progress_bg").css("transform", "scaleY(1)");
      $(".progress_btn").css("transform", "scale(0)")
    })
  })();


$(function () {
  var tag = false,
    ox = 0,
    left = 0,
    bgleft = 0;
  $('.progress_btn').mousedown(function (e) {
    ox = e.pageX - left;
    console.log(ox);
    tag = true;
  });
  $(document).mouseup(function () {
    tag = false;
  });
  $('.progress').mousemove(function (e) { //鼠标移动
    if (tag) {
      left = e.pageX - ox;
      if (left <= 0) {
        left = 0;
      } else if (left > 1200) {
        left = 1200;
      }
      console.log(left);
      $('.progress_btn').css('left', left);
      $('.video_progress').width(left);
      $("video")[0].currentTime = $("video")[0].duration * left / 1200;
      $('.text').html(parseInt((left / 1200) * 100) + '%');
    }
  });
  $('.progress_bg').click(function (e) { //鼠标点击
    if (!tag) {
      bgleft = $('.progress_bg').offset().left;
      left = e.pageX - bgleft;
      console.log(left);
      if (left <= 0) {
        left = 0;
      } else if (left > 1200) {
        left = 1200;
      }
      $('.progress_btn').css('left', left);
      $('.video_progress').animate({
        width: left
      }, 0);
      $('.text').html(parseInt((left / 1200) * 100) + '%');
      $("video")[0].currentTime = $("video")[0].duration * left / 1200;
    }
  });
});

最后的效果