原生JS实现拖拽垂直进度条

最新推荐文章于 2024-03-20 16:18:57 发布

白白66

最新推荐文章于 2024-03-20 16:18:57 发布

阅读量278

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_60073892/article/details/126846222

版权

先看效果图

代码如下

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS实现拖拽垂直进度条</title>
    <style>
        .luminancedrag {
            position: absolute;
            top: 170px;
            right: 1200px;
            width: 10px;
            height: 200px;
            background-color: #2979fe;
            border-radius: 12px;
        }

        .luminancedrag .dot {
            display: flex;
            position: absolute;
            bottom: 0;
            right: 0;
            width: 12px;
            height: 10px;
            background-color: #000;
            border-radius: 50%;
        }

        .luminancedrag .data {
            position: absolute;
            top: -30px;
            right: 0;
        }

        .luminancedrag .already {
            background-color: pink;
            height: 100%;
            border-radius: 12px;

        }
    </style>

</head>

<body>

    <div class="luminancedrag" id="bar" :style="">
        <div id="proceed" class="already"></div>
        <div class="dot" id="proDot"></div>
        <div class="data" id="data">0</div>
    </div>

    <script>
        window.onload = function () {
            var bar = document.getElementById('bar');
            var proDot = document.getElementById('proDot');
            var disY = ''
            // var proceed = document.getElementById('proceed');
            //鼠标按下事件
            proDot.onmousedown = function (ev) {
                var myEvent = ev || event;
                // 计算鼠标相对滑块上的位置
                if (!disY) {
                    disY = myEvent.clientY;//鼠标距离窗口位置
                }
                //鼠标移动事件
                document.onmousemove = function (ev) {
                    var myEvent = ev || event;
                    console.log('myEvent', myEvent);
                    console.log(ev, event);
                    // 计算滑块的动态bottom值
                    var l = disY - myEvent.clientY;
                    // 限制拖拽范围
                    if (l < 0) {
                        l = 0;
                    } else if (l > bar.offsetHeight - proDot.offsetHeight) {
                        l = bar.offsetHeight - proDot.offsetHeight;
                    };
                    proDot.style.bottom = l + 'px';
                    let proceedHeight = bar.offsetHeight - l
                    $("#proceed").css("height", proceedHeight + "px");
                    var petcent = Math.floor((1 - proceedHeight / bar.offsetHeight) * 100)      //95等分
                    var dataValue = Math.floor(petcent * (65535 / 95))          //65535分95等分再乘百分比得出总数
                    $('#data').text(dataValue)
                    console.log(dataValue);
                    // 计算拖拽移动距离与可拖动总范围的比例
                    var scale = l / (bar.offsetHeight - proDot.offsetHeight);
                };
                //鼠标弹起事件
                document.onmouseup = function () {
                    document.onmousemove = null;
                    // document.onmouseup = null;
                    console.log(document.onmousemove);

                };
            };
        };


    </script>

</body>
<script src="./common/js/jquery.js"></script>

</html>