Effect: press and hold the mouse to drag the progress bar, and the mouse will pop up without any effect
Train of thought:
Layout: there are three div s in the large box scroll, the first is the start box (bar), the second is the fill (display progress) box, and use absolute positioning to make the left of the two boxes changeable
js: use onmousedown event for the bar box, calculate the distance between the mouse press point and the left side of the web page, then use onmousemove event for the document, calculate the distance between the mouse position and scroll when moving, then assign the left of the bar box and the width of the fill box; use onmouseup event for the document to stop the onmousemove event.
Key knowledge: position location, onmousedown/onmouseup/onmousemove, event object
Specific code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal drag(Progress bar)</title>
<style>
* {
margin: 0;
padding: 0;
}
.scroll {
width: 300px;
height: 10px;
margin: 100px;
background-color: #ccc;
position: relative;
}
.bar {
width: 10px;
height: 24px;
background-color: #369;
/*margin-top: -7px;invalid*/
position: absolute;
top: -7px;
left: 0;
cursor: pointer;
}
#fill {
width: 0;
height: 100%;
background-color: #369;
position: absolute;
}
</style>
</head>
<body>
<div class="scroll" id="scroll">
<div class="bar" id="bar"></div>
<div id="fill"><!-- The box is filled --></div>
<br/>
<div id="text"></div>
</div>
</body>
<script type="text/javascript">
var scroll = document.getElementById('scroll');
var text = document.getElementById('text');
var bar = scroll.children[0];
var fill = scroll.children[1];
// Drag = press + move
bar.onmousedown = function(event){//Mouse down
var event = event || window.event;//onmousedown event object
var downLeft = event.clientX - this.offsetLeft;//Distance between mouse down point and left side of webpage
var that = this;//that points to bar
//Note that the bar box follows the mouse, so here is the document
var length = 0;
document.onmousemove = function(event){
var event = event || window.event;//onmousemove event object
length = event.clientX-downLeft;//Distance between mouse position and scroll when moving
if(length<0){
length = 0;
}else if(length>290){
length = 290;
}
that.style.left = length+'px';
fill.style.width = length + 'px';//Width of fill box
text.innerHTML = "Loaded"+parseInt(length/290*100)+"%";
//Clear bar box selected
window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty();
}
document.onmouseup = function(event){
document.onmousemove = null;//Do nothing with the mouse
}
}
</script>
</html>Specific effect: Progress bar