首先，我们来看一下效果：
（推荐教程：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.offsetWidthbox.onmousedown = function (ev) {let boxL = box.offsetLeftlet e = ev || window.event //兼容性let mouseX = e.clientX //鼠标按下的位置window.onmousemove = function (ev) {let e = ev || window.eventlet 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 * 100p.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 / 2if (left < 0) {left = 0}if (left >= cha) {left = cha}box.style.left = left + 'px'let bili = left / cha * 100p.innerHTML = '当前位置' + Math.ceil(bili) + '%'console.log(left)return false}</script>
更多炫酷javascript特效代码，尽在：javascript特效
以上就是js如何实现调节音量滑块的详细内容，更多请关注24课堂在线网其它相关文章！
