jQuery可拖动进度条简单代码实现

2022-09-03 22:36·轻鸟545

Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="css/progress.css">
    <script src="js/jquery_progress.js"></script>


</head>
<body>
    <div class="progress">
        <div class="progress_bg">
            <div class="progress_bar"></div>
        </div>

        <div class="progress_btn"></div>
        <div class="progress_text">0%</div>
    </div>
</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:#c5c2c2;
}

.progress_bar{
    background: #43a5f5; 
    width: 0; 
    height: 10px; 
    border-radius: 5px;
}

.progress_btn{
    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_btn:hover{
    border-color:#24e9f7;
}

Javascript:

$(function(){
    let flag = false;
    let x = 0;
    let left = 0;
    let bg_left = 0;

    $('.progress_btn').mousedown(function(e){
        x = e.pageX-left;
        flag = true;
    });

    $(document).mouseup(function(){
        flag = false;
    });

    //鼠标移动事件
    //鼠标移动的同时去改变精度条的长度和按钮的相对左部的距离
    $('.progress').mousemove(function(e){
        if(flag){
            //距离的计算,pageX属性，求出鼠标移动的距离
            left = e.pageX - x;
            if(left <=0){
                left = 0;
            }
            else if(left > 300){
                left = 300;
            }
            $('.progress_btn').css('left',left);
            $('.progress_bar').width(left);
            $('.progress_text').html(parseInt((left/300)*100) + '%');
        }
    });

    //鼠标点击事件
    //鼠标点击就记录相对位置
    $('.progress_bg').click(function(e){
        if(!flag){
            bg_left = $('.progress_bg').offset().left;
            left = e.pageX - bg_left;
            if(left<=0){
                left = 0;
            }
            else if(left > 300){
                left = 300;
            }
            $('.progress_btn').css('left',left);
            $('.progress_bar').animate({width:left},300);
            $('.progress_text').html(parseInt((left/300)*100) + '%');
        }
    });


});
举报
评论 0
    热门：