實現(xiàn)思路是：因為能夠拖動，所以是相對于一個盒子定位的，拖動的時候走過的總距離是父盒子的總長度 - 定位盒子的長度。然后走過的距離除以總長可以得到百分比，實現(xiàn)如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.scroll{
width: 400px;
height: 8px;
background-color: #ccc;
margin: 50px;
position: relative;
}
.bar{
position: absolute;
width: 10px;
height: 20px;
background: #369;
top: -50%;
margin-top: -2px;
cursor: pointer;
left: 0;
}
.mask{
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #369;
}
</style>
</head>
<body>
<div class="scroll" id="scroll">
<div class="bar"></div>
<div class="mask"></div>
</div>
<div id="demo"></div>
</body>
</html>
<script>
var scroll = document.getElementById('scroll')
var demo = document.getElementById("demo");
var bar = scroll.children[0]
var mask = scroll.children[1]
bar.onmousedown = function (e) {
var e = e || window.event // 標準化event
var leftVal = e.clientX - this.offsetLeft // 因為當前盒子是bar,bar是相對于scroll定位的，因此得到的offsetLeft是相對于scroll的距離，所以說leftVal是scroll距離瀏覽器左邊的距離
var that = this
document.onmousemove = function (e) {
var e = e || window.event // 標準化event
var maxLimit = scroll.offsetWidth - 10 // 10為bar的寬度
that.style.left = event.clientX - leftVal + 'px'; // 設置滑塊走過的距離,為什么要設置后獲取，因為style是行內樣式，不設置湖區(qū)不到
var val = parseInt(that.style.left);
if (val < 0) {
val = 0
} else if (val > maxLimit) {
val = maxLimit
}
that.style.left = val + 'px'
mask.style.width = that.style.left; // 遮罩盒子的寬度
// 計算百分比
demo.innerHTML = "已經(jīng)走了:"+ parseInt(parseInt(that.style.left) / maxLimit * 100) + "%"; // 走過的距離除以總長就得到百分比
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); // 解決選中出現(xiàn)藍色的一片的bug
}
document.onmouseup = function() {
document.onmousemove = null; // 彈起鼠標不做任何操作
}
}
</script>
