【html+js+css】实现可拖动竖直(纵向)进度条

最新推荐文章于 2022-12-01 16:22:03 发布

东啊東

最新推荐文章于 2022-12-01 16:22:03 发布

阅读量2.5k

点赞数 2

文章标签： html javascript css 前端 web

本文链接：https://blog.csdn.net/qq_51567295/article/details/126939075

版权

一、第一种：可直接点击或拖动

1.例图

2.代码

<html>
<head>
    <meta charset="UTF-8">
    <title>竖直滑动条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            background-color: #818181;
            /* 防止选中 */
            -webkit-user-select:none;
            user-select:none;
        }
        #voice_total{
            position: absolute;
            height: 140px;
            background-color: snow;
            width: 20px;
            top: 42%;
            left: 50%;
            transform: translate(-49.8%, -50%);
            border-radius: 10px;
            overflow: hidden;
        }
        #voice_pro {
            width: 20px;
            height: 100%;
            position: absolute;
            bottom: 0;
            background-color: rgba(0, 174, 236, 0.9);
        }
        p{
            margin-left: 100px;
            color: black;
        }

    </style>
</head>
<body  oncontextmenu="doNothing()">
<!-- 进度条 -->
<div id="voice_total">
    <!-- 当前音量 -->
    <div style="pointer-events: none;" id="voice_pro"></div>

</div>
<p></p>
<script>

    const voiceTotal = document.getElementById("voice_total");
    const ptxt = document.getElementsByTagName('p')[0];
    const voicePro = document.getElementById("voice_pro");
    //添加事件
    voiceTotal.addEventListener("mousedown", function (event) {
        // 获取按下时鼠标初始位置
        let y = event.pageY;
        // 按下时重新设置进度条
        voicePro.style.height = (140 - event.offsetY) + "px";
        // 获取进度条的初始height
        let voiceProLen = voicePro.offsetHeight
        // 计算当前进度条比例
        let ratio = voiceProLen / 140;

        ptxt.innerHTML = "当前进度条的比例：" + parseInt(ratio * 100);
        // 更改音量
        // video.volume = ratio;

        // 拖动需要写到down里面
        document.onmousemove = function(event) {
            // 获取移动的距离
            let diff = y - event.pageY;
            // 计算当前进度条的height
            let voiceProLenNew = voiceProLen + diff;
            // 当超出进度条范围，控制
            if(voiceProLenNew < 0) {
                voiceProLenNew = 0;
            } else if(voiceProLenNew > 140) {
                voiceProLenNew = 140;
            }

            // 更改进度条height
            voicePro.style.height = voiceProLenNew + "px";

            // 计算当前进度条比例
            let ratio = voiceProLenNew / 140;

            ptxt.innerHTML = "当前进度条的比例：" + parseInt(ratio * 100);
            // 更改音量
            // video.volume = ratio;
        }
    });
    //当鼠标弹起的时候，不做任何操作
    document.onmouseup = function() {
        document.onmousemove = null;
    }

</script>
</body>
</html>

二、第二种：只能点击节点滑动

（按下即触发，click和mousedown冲突，就只用了mousedown）

1.例图

2.代码

<html>
<head>
    <meta charset="UTF-8">
    <title>竖直滑动条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            background-color: #818181;
            /* 防止选中 */
            -webkit-user-select:none;
            user-select:none;
        }
        #voice_total{
            position: absolute;
            height: 140px;
            background-color: snow;
            width: 20px;
            top: 42%;
            left: 50%;
            transform: translate(-49.8%, -50%);
            border-radius: 10px;
            overflow: hidden;
        }
        #voice_pro {
            width: 20px;
            height: 100%;
            position: absolute;
            bottom: 0;
            background-color: rgba(0, 174, 236, 0.9);
            border-radius: 10px 10px 0 0;
        }
        #voice_point {
            width: 20px;
            height: 20px;
            background-color: #000000;
            position: absolute;
            top: 0;
            border-radius: 50%;
            cursor: pointer; /*更改鼠标样式*/
        }
        p{
            margin-left: 100px;
            color: black;
        }

    </style>
</head>
<body  oncontextmenu="doNothing()">
<!-- 进度条 -->
<div id="voice_total">
    <div id="voice_point"></div>
    <!-- 当前音量 -->
    <div style="pointer-events: none;" id="voice_pro"></div>

</div>
<p></p>
<script>

    const voiceTotal = document.getElementById("voice_total");
    const voicePoint = document.getElementById("voice_point");
    const ptxt = document.getElementsByTagName('p')[0];
    const voicePro = document.getElementById("voice_pro");
    //添加事件
    voicePoint.addEventListener("mousedown", function (event) {
        //页面事件的Y减去当前相对于最近的祖先定位元素
        let y = event.clientY - this.offsetTop;

        // 拖动需要写到down里面
        document.onmousemove = function(event) {
            //获取移动的距离
            let top = event.clientY - y;
            if (top < 0){
                top = 0;
            }
            else if (top > voiceTotal.offsetHeight - voicePoint.offsetHeight){
                top = voiceTotal.offsetHeight - voicePoint.offsetHeight;
            }
            //改变滑块的top
            voicePoint.style.top = top + "px";
            voicePro.style.height = (140 - top) + "px";

            let voiceNum = 1 - top/(140 - 20)
            //按照百分比得到当前滑动的距离
            ptxt.innerHTML = "当前滑块的移动的百分比：" + parseInt(voiceNum * 100) + "%";

        }
    });
    //当鼠标弹起的时候，不做任何操作
    document.onmouseup = function() {
        document.onmousemove = null;
    }

    let voicePointFlag = true;
    voicePoint.addEventListener("mousedown", function (){
        voicePointFlag = false;
    })
    voiceTotal.addEventListener("mousedown", function (e) {
        // 当点击了音量圆点，不改变音量
        if(voicePointFlag === false) {
            voicePointFlag = true;
            return;
        }
        let n = 140 - e.offsetY;
        if(e.offsetY > 120){
            n = 20;
        }
        voicePro.style.height = n + "px";
        voicePoint.style.top = (140 - n) + "px";
        let voiceNum = 1 - voicePoint.offsetTop / 120
        ptxt.innerHTML = "当前滑块的移动的百分比：" + parseInt(voiceNum * 100) + "%";

    });
</script>
</body>
</html>