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

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

先看效果图

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

 代码如下

<!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>

今天的文章原生JS实现拖拽垂直进度条分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/29273.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注