纯JS实现拖动进度条并附回调函数

心已赠人 2023-06-25 02:30 86阅读 0赞

之前工作需要一个回放的功能 不是视频回放 是百度地图API相关的移动轨迹回放

然后需要做些快进 倍速播放之类的 这篇就是抽出了我的进度条模块

button其中changePercent为例子方法 可以通过其中的公式来自动化控制进度条

其中\*5是因为scroll的宽度为500px 这个地方要注意

例如scroll的宽度是150px 其中的计算就是\*1.5 也可以 乘于宽度/100

![效果图][20191224194742254.gif]

<html>
    <head>
      <meta charset="UTF-8">
      <title>历史轨迹回放</title>
      <style>
        *{
          margin: 0;
          padding: 0;
        }
        .scroll{
          margin:15px;
          width: 500px;
          height: 5px;
          background: #ccc;
          position: relative;
        }
        .bar{
          width: 10px;
          height: 20px;
          background: #369;
          position: absolute;
          top: -7px;
          left: 0;
          cursor: pointer;
        }
        .mask{
          position: absolute;
          left: 0;
          top: 0;
          background: #369;
          width: 0;
          height: 10px;
        }
      </style>  
    </head>
    <body>
      
      <div class="scroll" id="scroll">
        <div class="bar" id="bar">
        </div>
        <div class="mask" id="mask">
        </div>
      </div>
     
     <input type="button" name="test" onclick="changePercent(20)" value="跳转到20%"></input>
    
    
      <p>未开始</p>
      <script>  
    
        var scroll = document.getElementById('scroll');
        var bar = document.getElementById('bar');
        var mask = document.getElementById('mask');
        var ptxt = document.getElementsByTagName('p')[0];
        var barleft = 0;
        bar.onmousedown = function(event){
          var event = event || window.event;
          var leftVal = event.clientX - this.offsetLeft;
          var that = this;
           // 拖动一定写到 down 里面才可以
          document.onmousemove = function(event){
            var event = event || window.event;
            barleft = event.clientX - leftVal;     
            if(barleft < 0)
              barleft = 0;
            else if(barleft > scroll.offsetWidth - bar.offsetWidth)
              barleft = scroll.offsetWidth - bar.offsetWidth;
            mask.style.width = barleft +'px' ;
            that.style.left = barleft + "px";
            ptxt.innerHTML = "已经播放了" + parseInt(barleft/(scroll.offsetWidth- 
            bar.offsetWidth) * 100) + "%";
     
            //防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bug
            window.getSelection ? window.getSelection().removeAllRanges() :     
            document.selection.empty();
          }
     
        }
        document.onmouseup = function(){
          document.onmousemove = null; //弹起鼠标不做任何操作
        }
    
        function changePercent(percent) {
            mask.style.width = percent*5+'px';
            bar.style.left = percent*5+'px';
          	console.log(scroll.offsetWidth);
            console.log(mask.offsetWidth);
            ptxt.innerHTML = "已经播放了" + parseInt(mask.offsetWidth* 100/scroll.offsetWidth ) + "%";
      	}
      </script>
    </body>
    </html>

顺颂时祺

[20191224194742254.gif]: https://img-blog.csdnimg.cn/20191224194742254.gif