侧边栏壁纸
  • 累计撰写 25 篇文章
  • 累计创建 27 个标签
  • 累计收到 43 条评论

目 录CONTENT

文章目录

Jquery 实现双滑块进度条

junior
2022-05-21 / 0 评论 / 0 点赞 / 330 阅读 / 3,121 字

效果图

擷取10

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery 滑动</title>
    <link rel="stylesheet" href="css/progress.css">
    <script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
    <div class="progress">
        <div class="progress_bg">
            <div class="progress_r_bar"></div>
            <div class="progress_bar"></div>
        </div>
        <div class="progress_lbtn"></div>
        <div class="progress_rbtn"></div>
        <div class="text">0%</div>
        <div class="text_r">50%</div>
    </div>
    <script src="js/progress.js"></script>
</body>
</html>

CSS

.progress {
    position: relative;
    width: 300px;
    margin: 100px auto;
}

.progress_bg {
    height: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    background-color: #3753f2;
}

.progress_r_bar {
    background: #ff001f;
    width: 150px;
    height: 10px;
    border-radius: 5px;
}

.progress_bar {
    background: #5FB878;
    width: 0;
    height: 10px;
    border-radius: 5px;
    margin-top: -10px;
}


.progress_lbtn {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    position: absolute;
    background: #fff;
    left: 0px;
    margin-left: -10px;
    top: -5px;
    cursor: pointer;
    border: 1px #ddd solid;
    box-sizing: border-box;
}

.progress_lbtn:hover {
    border-color: #F7B824;
}

.progress_rbtn {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    position: absolute;
    background: #fff;
    left: 150px;
    margin-left: -10px;
    top: -5px;
    cursor: pointer;
    border: 1px #ddd solid;
    box-sizing: border-box;
}

.progress_rbtn:hover {
    border-color: #F7B824;
}

js

$(function () {
    var tag = false, ox = 0, left = 0, bgleft = 0, r_left = 150;
    // 获取进度条最大宽度
    var round = $('.progress').width()
    console.log(round);
    $('.progress_lbtn').bind("mousedown", function (e) {
        ox = e.pageX - left;
        tag = true;
        $(document).bind("mousemove", function (e) {//鼠标移动
            if (tag) {
                left = e.pageX - ox;
                if (left <= 0) {
                    left = 0;
                } else if (left > r_left) {
                    left = r_left;  // 滑动不超过最右边滑块
                }
                $('.progress_lbtn').css('left', left);
                $('.progress_bar').width(left);
                $('.text').html(parseInt((left / round) * 100) + '%');
            }
            // event.defaultPrevented;
            return false;
        });
    });

    $('.progress_rbtn').bind("mousedown", function (e) {
        ox = e.pageX - r_left;
        tag = true;
        $(document).bind("mousemove", function (e) {//鼠标移动
            if (tag) {
                r_left = e.pageX - ox;
                if (r_left <= left) {
                    r_left = left;
                } else if (r_left > round) {
                    r_left = round;     // 滑动不超过最左边滑块
                }
                $('.progress_rbtn').css('left', r_left);
                $('.progress_r_bar').width(r_left);
                $('.text_r').html(parseInt((r_left / round) * 100) + '%');
            }
            // event.defaultPrevented;
            return false;
        });
    });


    $(document).bind("mouseup", function () {
        tag = false;
        $(document).unbind("mousemove");
    });

    // $('.progress_bg').click(function(e) {//鼠标点击
    //     if (!tag) {
    //         bgleft = $('.progress_bg').offset().left;
    //         left = e.pageX - bgleft;
    //         if (left <= 0) {
    //             left = 0;
    //         }else if (left > 300) {
    //             left = 300;
    //         }
    //         $('.progress_lbtn').css('left', left);
    //         $('.progress_bar').animate({width:left},300);
    //         $('.text').html(parseInt((left/300)*100) + '%');
    //     }
    // });
});

0

评论区