<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>水平滚动条</title>
<style type="text/css">
.box{
width:300px;
height:10px;
background:#ff6633;
margin:50px auto;
position:relative;
}
.progress{
width:15px;
height:30px;
background:#6600cc;
position:absolute;
top:-9px;
left:0;
cursor:pointer;
}
.bg{
position:absolute;
background:#6600cc;
width:0;
height:10px;
left:0;
top:0;
}
.message{
height:50px;
position:absolute;
top:30px;
left:100px;
}
</style>
</head>
<body>
<div class="box">
<div class="bg"></div>
<div class="progress"></div>
<div class="message">
0px
进度:0%
</div>
</div>
<script type="text/javascript">
var pg=document.querySelector(".progress");
var box=pg.parentNode;
var bg=pg.previousElementSibling;
var message=box.children[2];
pg.onmousedown=function(){
var that=this;
var leftVal=event.clientX-this.offsetLeft;
document.onmousemove=function(event){
var event=event||window.event;
var left=event.clientX-leftVal;
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
if(left>=box.offsetWidth){
left=box.offsetWidth;
}
else if(left<=0){
left=0;
}
that.style.left=left+"px";
bg.style.width=left+"px";
var str=parseInt(left)+"px ";
str+=parseInt(left/box.offsetWidth*100)+"%";
message.innerHTML=str;
}
document.onmouseup=function()
{
document.onmousemove=null;
}
}
</script>
</body>
</html>
小伙伴们可以测试一下 有时候鼠标抬起的时候 它还是会执行mousemove所操作的事情
导致抬起鼠标 移动鼠标 进度变化
想要解决这个Bug 就需要清除选中的内容
window.getSelection?window.getSelection.removeAllRange():document.selection.empty();
前面的方法是标准浏览器 后面的IE的 就是做一下兼容