Jquery插件 自制进度条
HTML
1 <div class="progress"> 2 <div class="progress_bg"> 3 <div class="progress_bar"></div> 4 </div> 5 <div class="progress_btn"></div> 6 <div class="text">0%</div> 7 </div>
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 });
