HTML

1     
     
      2         
      
       3             
       
4         
      
5         
      
6         
      
       0%
      
7     
     

CSS

1         .progress { 2             position: relative; 3             width: 300px; 4             margin: 100px auto; 5         } 6  7         .progress_bg { 8             height: 10px; 9             border: 1px solid #ddd;10             border-radius: 5px;11             overflow: hidden;12             background-color: #f2f2f2;13         }14 15         .progress_bar {16             background: #5FB878;17             width: 0;18             height: 10px;19             border-radius: 5px;20         }21 22         .progress_btn {23             width: 20px;24             height: 20px;25             border-radius: 5px;26             position: absolute;27             background: #fff;28             left: 0px;29             margin-left: -10px;30             top: -5px;31             cursor: pointer;32             border: 1px #ddd solid;33             box-sizing: border-box;34         }35 36             .progress_btn:hover {37                 border-color: #F7B824;38             }

JQUERY

1 $(function () { 2     var tag = false, ox = 0, left = 0, bgleft = 0; 3     $('.progress_btn').mousedown(function (e) { 4         ox = e.pageX - left; 5         tag = true; 6     }); 7     $(document).mouseup(function () { 8         tag = false; 9     });10     $('.progress').mousemove(function (e) {
   //鼠标移动11         if (tag) {12             left = e.pageX - ox;13             if (left <= 0) {14                 left = 0;15             } else if (left > 300) {16                 left = 300;17             }18             $('.progress_btn').css('left', left);19             $('.progress_bar').width(left);20             $('.text').html(parseInt((left / 300) * 100) + '%');21         }22     });23     $('.progress_bg').click(function (e) {
   //鼠标点击24         if (!tag) {25             bgleft = $('.progress_bg').offset().left;26             left = e.pageX - bgleft;27             if (left <= 0) {28                 left = 0;29             } else if (left > 300) {30                 left = 300;31             }32             $('.progress_btn').css('left', left);33             $('.progress_bar').animate({ width: left }, 300);34             $('.text').html(parseInt((left / 300) * 100) + '%');35         }36     });37 });