Java教程

可拖动的播放条

本文主要是介绍可拖动的播放条，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

方案一

鼠标按下的时候 起点 = 球的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>
这篇关于可拖动的播放条的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航