JS+CSS音量条

<!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Volume Bar</title>
    </head>
    <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>

    <body>
        <div class="all">
            <p>当前位置0%</p>
            <div class="bar">
                <div class="box"></div>
            </div>
        </div>
    </body>
    <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>
</html>
JS+CSS音量条

推荐阅读更多精彩内容
