JS实现百分比水平条

最新推荐文章于 2021-08-10 20:02:14 发布

sunda112

最新推荐文章于 2021-08-10 20:02:14 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/sunling112/article/details/53463066

JS 专栏收录该内容

19 篇文章

订阅专栏

<!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;
border-radius: 4px;

}
.bar {
width: 10px;
height: 22px;
background-color: #369;
position: absolute;
top: -7px;
left: 0;
cursor: pointer;
border-radius: 4px;
}
.mask{
width: 0;
height: 100%;
background: #369;
border-radius: 4px 0 0 4px;
}

</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 bar = scroll.children[0];
var mask = scroll.children[1];
var demo = document.getElementById("demo");
bar.onmousedown = function(event){
var that = this;
var event = event || window.event;
var left = event.clientX - this.offsetLeft;

document.onmousemove = function(event){
var event = event || window.event;
that.style.left = event.clientX - left + "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)/390*100)+"%";

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //防止选择拖动，前者正常写法，后者document.selection.empty()兼容IE678写法

}
}
document.onmouseup = function(){
document.onmousemove = null;

}
</script>