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

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

白白66

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

阅读量243

点赞数

文章标签： js

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

版权

先上效果图

<!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: pink;
            border-radius: 12px;
        }

        .luminancedrag .dot {
            display: flex;
            position: absolute;
            bottom: 0;
            right: 0;
            width: 12px;
            height: 12px;
            background-color: #2979fe;
            border-radius: 50%;
        }
    </style>

</head>

<body>

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

    <script>
        window.onload = function () {
            var bar = document.getElementById('bar');
            var proDot = document.getElementById('proDot');
            //鼠标按下事件
            proDot.onmousedown = function (ev) {
                var myEvent = ev || event;
                // 计算鼠标相对滑块上的位置
                var disY = myEvent.clientY;//鼠标距离窗口位置-
                //鼠标移动事件
                document.onmousemove = function (ev) {
                    var myEvent = 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';
                    // 计算拖拽移动距离与可拖动总范围的比例
                    var scale = l / (bar.offsetHeight - proDot.offsetHeight);
                };
                //鼠标弹起事件
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            };
        };


    </script>

</body>

</html>