This process is divided into three steps:
1. Analysis First, get the element. Remember that onmousemove must be written in onmousedown, and make good use of var that=this. The most important thing in onmosedown is to get the moving distance. First, the value of event.client-leftVal;
2. Determine whether the moving distance is out of range. Since that.style.left obtains a string, use paseInt to convert it into a digital judgment. Finally, give the moving distance to the width of the mask box;3. The value of onmousemove d is null when the mouse is removed;
<!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: 22px;
background-color: #369;
position: absolute;
top: -7px;
left: 0;
cursor: pointer;
}
.mask {
width: 0;
height: 100%;
background-color: #369;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="scroll" id="scrollBar">
<div class="bar"></div>
<div class="mask"></div>
</div>
<div id="demo"></div>
</body>
</html>
<script>
var scrollBar=document.getElementById("srollBar");
var bar=scrollBar[0];
var mask=scrollBar[1];
var domo=scrollBar.nextSibling;
bar.onmousedown=function(){
var yuanX=this.client-scroll.offsetLeft;
var yuanY=this.clientY-scrpll.offsetTop;
}
bar.onmousemove=function(event){
var event=event || window.event; var nowX=event.clientX-yuanX; var nowY=event.clientY-yuanY; mask.style.className="mask"; } </script> <script> var scrollBar = document.getElementById("scrollBar"); var bar = scrollBar.children[0]; var mask = scrollBar.children[1]; var demo = document.getElementById("demo"); /* document.onmousedown = function() { alert(11); }*/ bar.onmousedown = function(event) {
var event = event || window.event;
var leftVal = event.clientX - this.offsetLeft;
// alert(11);
// 拖动一定写到 down 里面才可以
var that = this;
document.onmousemove = function(event) {
var event = event || window.event;
that.style.left = event.clientX - leftVal + 'px';
//alert(that.style.left);
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; // the width of the mask box
// calculate the percentage
demo.innerHTML = "gone:" + parseInt(parseInt(that.style.left) / 390 * 100) + "%";
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
}
document.onmouseup = function() {
document.onmousemove = null; // do nothing when the mouse is raised
}
}
</script>