滑动条

加了范围限制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
  .modia{
    width: 800px;
    height: 400px;
    /* margin:0 auto; top:30px; left:200px; border:1px solid #eee; */
    top: 50%;
    left: 50%;
    border:1px solid #eee;
    /* transform: translate(-50%, -50%); */
    margin-top: -200px;
    margin-left: -400px;
    position: absolute;
  }
  .line{
    top: 370px;
    left: 100px;
    width: 600px;
    height: 1px;
    background-color: red;
    position: relative;
  }
  .slider{
    display: block;
    position: absolute;
    top: -9px;
    left: 0;
    height: 20px;
    width: 10px;
    /* border-radius: 50%; */
    background-color: darkred;
    opacity: .5;
  }
</style>
<title>进度滑块</title>
</head>
<body>

<div class="modia">
  <div class="line">
    <span class="slider"></span>
  </div>
</div>

<script>

  // const oDiv = document.getElementsByClassName('line')[0];
  const oSpan = document.getElementsByClassName('slider')[0];

  let disLeft = getElementPosition(oSpan) + 10;
  let disDrap = 0;

  oSpan.onmousedown = function(e){
    document.onmousemove  = function(e){
      disDrap = e.clientX - disLeft;
      if(e.clientX <= disLeft){
        disDrap = 0;
      }
      if(e.clientX >= disLeft + 580){
        disDrap = 580;
      }
      oSpan.style.left = disDrap + 'px';
    }
    document.onmouseup = function(e){
      document.onmousemove = null;
    }
  }

  function getElementPosition(ele){
    if(ele.offsetParent !== document.querySelector('body')){
      return ele.offsetLeft + getElementPosition(ele.parentElement);
    }
    return ele.offsetLeft;
  }

</script>

</body>
</html>
参考
https://www.cnblogs.com/dh-dh/p/9254172.html 用video标签流式加载
https://www.yisu.com/zixun/407340.html html5用video标签流式加载的实现
滑动条

Leave a Reply
