css+原生js调节音量滑块

最新推荐文章于 2025-08-06 14:59:59 发布

原创最新推荐文章于 2025-08-06 14:59:59 发布 · 8k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#移动滑块 #css+js #音量调节js代码

前端特效专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个简单的HTML、CSS及JavaScript实现的拖拽进度条案例，通过鼠标操作改变进度条的位置，并实时显示百分比。

效果

html部分

<body>
  <div class="all">
    <p>当前位置0%</p>
    <div class="bar">
      <div class="box"></div>
    </div>
  </div>
</body>

css部分

 <style>
    .all {
      width: 500px;
      height: 80px;
      margin: 100px auto;
      position: relative;
    }

    .bar {
      width: 500px;
      height: 20px;
      border-radius: 10px;
      background: #aaa;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      cursor: pointer;
    }

    .box {
      width: 30px;
      height: 30px;
      background: #000;
      position: absolute;
      bottom: 0;
      top: 0;
      margin: auto 0;
      border-radius: 50%;
      cursor: pointer;
      transition: left 0.1s linear 0s;
    }
  </style>

js逻辑

<script>
  var box = document.getElementsByClassName('box')[0]
  var bar = document.getElementsByClassName('bar')[0]
  var all = document.getElementsByClassName('all')[0]
  var p = document.getElementsByTagName('p')[0]
  var cha = bar.offsetWidth - box.offsetWidth
  box.onmousedown = function (ev) {
    let boxL = box.offsetLeft
    let e = ev || window.event  //兼容性
    let mouseX = e.clientX  //鼠标按下的位置
    window.onmousemove = function (ev) {
      let e = ev || window.event
      let moveL = e.clientX - mouseX //鼠标移动的距离
      let newL = boxL + moveL    //left值
      // 判断最大值和最小值
      if (newL < 0) {
        newL = 0
      }
      if (newL >= cha) {
        newL = cha
      }
      // 改变left值
      box.style.left = newL + 'px'
      // 计算比例
      let bili = newL / cha * 100
      p.innerHTML = '当前位置' + Math.ceil(bili) + '%'
      return false   //取消默认事件
    }
    window.onmouseup = function () {
      window.onmousemove = false   //解绑移动事件
      return false
    }
    return false
  };
  // 点击音量条
  bar.onclick = function (ev) {
    let left = ev.clientX - all.offsetLeft - box.offsetWidth / 2
    if (left < 0) {
      left = 0
      }
      if (left >= cha) {
        left = cha
      }
    box.style.left = left + 'px'
    let bili = left / cha * 100
    p.innerHTML = '当前位置' + Math.ceil(bili) + '%'
    console.log(left)
    return false
  }
</script>