效果图
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery 滑动</title>
<link rel="stylesheet" href="css/progress.css">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="progress">
<div class="progress_bg">
<div class="progress_r_bar"></div>
<div class="progress_bar"></div>
</div>
<div class="progress_lbtn"></div>
<div class="progress_rbtn"></div>
<div class="text">0%</div>
<div class="text_r">50%</div>
</div>
<script src="js/progress.js"></script>
</body>
</html>
CSS
.progress {
position: relative;
width: 300px;
margin: 100px auto;
}
.progress_bg {
height: 10px;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
background-color: #3753f2;
}
.progress_r_bar {
background: #ff001f;
width: 150px;
height: 10px;
border-radius: 5px;
}
.progress_bar {
background: #5FB878;
width: 0;
height: 10px;
border-radius: 5px;
margin-top: -10px;
}
.progress_lbtn {
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_lbtn:hover {
border-color: #F7B824;
}
.progress_rbtn {
width: 20px;
height: 20px;
border-radius: 5px;
position: absolute;
background: #fff;
left: 150px;
margin-left: -10px;
top: -5px;
cursor: pointer;
border: 1px #ddd solid;
box-sizing: border-box;
}
.progress_rbtn:hover {
border-color: #F7B824;
}
js
$(function () {
var tag = false, ox = 0, left = 0, bgleft = 0, r_left = 150;
// 获取进度条最大宽度
var round = $('.progress').width()
console.log(round);
$('.progress_lbtn').bind("mousedown", function (e) {
ox = e.pageX - left;
tag = true;
$(document).bind("mousemove", function (e) {//鼠标移动
if (tag) {
left = e.pageX - ox;
if (left <= 0) {
left = 0;
} else if (left > r_left) {
left = r_left; // 滑动不超过最右边滑块
}
$('.progress_lbtn').css('left', left);
$('.progress_bar').width(left);
$('.text').html(parseInt((left / round) * 100) + '%');
}
// event.defaultPrevented;
return false;
});
});
$('.progress_rbtn').bind("mousedown", function (e) {
ox = e.pageX - r_left;
tag = true;
$(document).bind("mousemove", function (e) {//鼠标移动
if (tag) {
r_left = e.pageX - ox;
if (r_left <= left) {
r_left = left;
} else if (r_left > round) {
r_left = round; // 滑动不超过最左边滑块
}
$('.progress_rbtn').css('left', r_left);
$('.progress_r_bar').width(r_left);
$('.text_r').html(parseInt((r_left / round) * 100) + '%');
}
// event.defaultPrevented;
return false;
});
});
$(document).bind("mouseup", function () {
tag = false;
$(document).unbind("mousemove");
});
// $('.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_lbtn').css('left', left);
// $('.progress_bar').animate({width:left},300);
// $('.text').html(parseInt((left/300)*100) + '%');
// }
// });
});
评论区