向右滑动并点击的滚动条

<style>
    .progress {
        position: relative;
        width: 300px;
        margin: 100px auto;
    }
    .progress_bg {
        height: 10px;
        border: 1px solid #000;
        border-radius: 5px;
        overflow: hidden;
    }
    .progress_bar {
        background: pink;
        width: 0;
        border-radius: 5px;
        height: 10px;
    }
    .progress_btn {
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 5px;
        background: blue;
        left: 0;
        margin-left: -10px;
        top: -5px;
        box-sizing: border-box;
        cursor: pointer;
        border: 1px solid #ccc;

    }
    .progress_btn:hover {
        /*box-sizing: border-box;*/
        background: yellowgreen;
    }

html文件

js文件 $(function(){ var tag = false,ox = 0,left = 0,bgLeft = 0; $(".progress_btn").mousedown(function(e){ ox = e.pageX- left; console.log(ox); tag = true; }); $(document).mouseup(function(e){ tag = false; }); $(".progress").mousemove(function(e){ if(tag){ left = e.pageX - ox; if(left<=0){ left = 0; } if(left>300){ left = 300; } $(".progress_btn").css("left",left); $(".progress_bar").width(left); $(".text").html(parseInt((left/300)100)+"%"); } }); $(".progress_bg").click(function(e){ if(!tag){ bgLeft = $(".progress_bg").offset().left; left = e.pageX - bgLeft; if(left<=0){ left = 0; } if(left>300){ left = 300; } $(".progress_btn").css("left",left); $(".progress_bar").width(left); $(".text").html(parseInt((left/300)100)+"%"); } }) })