拖动== 按下+移动
<!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: 100px;
position: relative;
}
.bar{
width: 10px;
height: 20px;
background-color: #369;
position: absolute;
top: -5px;
left: 0;
cursor: pointer;
}
#mask{
width: 0;
height: 100%;
background-color: #369;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="scroll" id="scroll">
<div class="bar"></div>
<div id="mask"></div>
</div>
<div id="demo"></div>
</body>
</html>
<script>
var scroll = document.getElementById("scroll");
var bar = scroll.children[0];
var mask = scroll.children[1];
var demo = document.getElementById("demo");
// 拖动== 按下+移动
bar.onmousedown = function (event) {
var event = event || window.event;
var leftVal = event.clientX - this.offsetLeft;
var that = this;
document.onmousemove= function (event) {
var event = event || window.event;
that.style.left = event.clientX - leftVal + "px";
var val = parseInt(that.style.left);
if(val < 0){
that.style.left = 0;
}else if(val > 390){
that.style.left = "390px";
}
mask.style.width = that.style.left ; //遮罩盒子的宽度
demo.innerHTML = "已经走了:" + parseInt(parseInt(that.style.left)/(scroll.offsetWidth-bar.offsetWidth)*100)+"%";
window.getSelection() ? window.getSelection().removeAllRanges() : document.selection.empty();
}
document.onmouseup = function () {
document.onmousemove = null;
}
}
</script>