根据项目需求自己进行了简单的封装,具体代码及效果截图如下:
效果
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="progress">
<div class="progress_bg">
<div class="progress_bar"></div>
</div>
<div class="progress_btn"></div>
<div class="text">0%</div>
</div>
</body>
</html>
CSS
<style>
.progress{position: relative; width:300px;margin:100px auto;}
.progress_bg{height: 10px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;background-color:#f2f2f2;}
.progress_bar{background: #5FB878; 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:#F7B824;}
</style>
js
<script>
$(function () {
setProgress(50, 30)
})
/**
* 设置进度条位置
* initProgress 初始化值
* stepNum 步值,即每一步代表多少
*/
function setProgress (initProgress, stepNum) {
var tag = false,ox = 0,left = 0,bgleft = 0;
$('.progress_btn').css('left', initProgress);
$('.progress_bar').animate({width:initProgress},300);
$('.text').html(parseInt((initProgress/300)*stepNum));
$('.progress_btn').on('touchstart', function(e) {
ox = e.originalEvent.targetTouches[0].pageX - left - initProgress;
tag = true;
});
$(document).on('touchend',function() {
tag = false;
});
$('.progress').on('touchmove', function(e) {//鼠标移动
if (tag) {
left = e.originalEvent.targetTouches[0].pageX - ox;
if (left <= 0) {
left = 0;
}else if (left > 300) {
left = 300;
}
$('.progress_btn').css('left', left);
$('.progress_bar').width(left);
$('.text').html(parseInt((left/300)*stepNum));
}
});
$('.progress_bg').click(function(e) {//鼠标点击
if (!tag) {
bgleft = $('.progress_bg').offset().left;
left = e.pageX - bgleft;
if (left <= 0) {
left = 0;
}else if (left > 300) {
left = 300;
}
$('.progress_btn').css('left', left);
$('.progress_bar').animate({width:left},300);
$('.text').html(parseInt((left/300)*stepNum));
}
});
}
</script>
以上代码仅供参考,如不满足,可自行修改