Html: 0% 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) + '%'); } });});