可拖动的播放条

2021-12-19 23:31:36 阅读：185 来源： 互联网

标签：document bar 鼠标拖动播放 offsetWidth scroll left

方案一

鼠标按下的时候 起点 = 球的x轴位置-偏移位置.
按下开始移动的时候 , 需要继承上次的偏移位置开始移动即style.left = 球的x轴实时位置-起点

<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body{
      padding: 100px;
      margin: 0;
    }
    .scroll{
      width: 500px;
      height: 5px;
      background: #ccc;
      position: relative;
    }
    .bar{
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #369;
      position: absolute;
      top: -7px;
      left: 0;
      cursor: pointer;
    }
    .mask{
      position: absolute;
      left: 0;
      top: 0;
      background: #369;
      width: 0;
      height: 5px;
    }
  </style>  
</head>
<body>
  <div class="scroll">
    <div class="bar"></div>
    <div class="mask"></div>
  </div>
  <p>已经走了0%</p>
  <script> 
    const [scroll, bar, mask, ptxt // 条, 点, 进度条, 进度字
    ] =['.scroll','.bar','.mask', 'p' ].map(item=>document.querySelector(item));
    let barleft = 0;

    bar.onmousedown = function(e){
      const leftVal = e.clientX - this.offsetLeft; // 类似于 res = x-l;
      document.onmousemove = ({clientX})=>{
        barleft = clientX - leftVal; // 类似于 l = res-x l就是left的值
        if(barleft < 0){barleft = 0;}
        else if(barleft > scroll.offsetWidth - bar.offsetWidth){barleft = scroll.offsetWidth - bar.offsetWidth;}
        mask.style.width = barleft;
        this.style.left = barleft;
        
        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; //弹起鼠标不做任何操作
    }
  </script>
</body>
</html>

方案二

不推荐

<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      padding: 100px;
      margin: 0;
    }

    .scroll {
      width: 500px;
      height: 5px;
      background: #ccc;
      position: relative;
    }

    .bar {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #369;
      position: absolute;
      top: -7px;
      left: 0;
      cursor: pointer;
    }

    .mask {
      position: absolute;
      left: 0;
      top: 0;
      background: #369;
      width: 0;
      height: 5px;
    }
  </style>
</head>

<body>
  <div class="scroll">
    <div class="bar"></div>
    <div class="mask"></div>
  </div>
  <p>已经走了0%</p>
  <script>
    const [scroll, bar, mask, ptxt // 条, 点, 进度条, 进度字
    ] = ['.scroll', '.bar', '.mask', 'p'].map(item => document.querySelector(item));
    const initScrollX = scroll.getBoundingClientRect().left; // scroll距离body距离
    
    bar.onmousedown = function (e) {
      const barX = bar.getBoundingClientRect().left; // 球距离body距离
      const mouseDistanceBar = e.clientX - initBarX; // 鼠标x坐标->距离->球左侧长度：鼠标距离球左侧的位置
      document.onmousemove = ({ clientX }) => {
        if (clientX - initScrollX - mouseDistanceBar < 0) { this.style.left = 0 } 
        else if (clientX - initScrollX - mouseDistanceBar + bar.offsetWidth > scroll.offsetWidth) { 
          this.style.left = scroll.offsetWidth - bar.offsetWidth;
        } else { 
          // 当前在球中鼠标x位置-条x位置-鼠标距离球左侧的位置：即假设永远使得在球左侧起拖动
          this.style.left = clientX - initScrollX - mouseDistanceBar; 
        }
        // 显示百分比
        const shwoPercent = parseInt(Number(this.style.left.replace('px',''))/(scroll.offsetWidth - bar.offsetWidth)*100);
        ptxt.innerHTML = `已经走了${shwoPercent}%`; 
        //防止选择内容--当拖动鼠标过快时候，弹起鼠标，bar也会移动，修复bug
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
      }
    }
    document.onmouseup = function () {
      document.onmousemove = null; //弹起鼠标不做任何操作
    }
  </script>
</body>
</html>

标签：document,bar,鼠标,拖动,播放,offsetWidth,scroll,left
来源： https://www.cnblogs.com/dshvv/p/15709133.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

可拖动的播放条

方案一

方案二