介绍 & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf-8"/比;
& lt; title> js滑动进度条效果& lt;/title>
& lt; style>
*{保证金:0;填充:0;用户选择:没有;}
.progress-bar{位置:相对;高度:10 px;宽度:400 px;保证金:200 px汽车;背景:# ebeef5; border - radius: 10 px;}
.progress-bar .pro-bar{:绝对;左:0;高度:10 px;宽度:10 px;背景:# 409 eff;}
.progress-bar .min-num{:绝对;左:-20 px;: 5 px;}
.progress-bar .max-num{:绝对;右:-40 px;: 5 px;}
.progress-bar .block{位置:绝对;高度:30 px;宽度:10 px;背景:# ccc;最高:-10 px; border - radius: 10 px;}
.progress-bar .block p{位置:绝对;显示:没有,左:-20 px;最高:-45 px;宽度:50 px;高度:30 px; text-align:中心;行高:30 px;背景:# ccc; border - radius: 20 px;}
.progress-bar .block:悬停p{显示:块;字体大小:10%;颜色:# fff;背景:# 409 eff;}
& lt;/style>
& lt;/head>
& lt; body>
类& lt; p=皃rogress-bar"祝辞
& lt;跨类=癿in-num"祝辞0 & lt;/span>
& lt;跨类=癿ax-num"祝辞100 & lt;/span>
类& lt; p=皃ro-bar"祝辞& lt;/p>
类& lt; p=癰lock"祝辞
& lt; p> 0 & lt;/p>
& lt;/p>
& lt;/p>
& lt;/body>
& lt; script>
(函数(){
让moveBlock=document.querySelector (& # 39; .block& # 39;);
让proBar=document.querySelector (& # 39; .pro-bar& # 39;);
让国旗=false;
让startX=零;
让moveMax=(400 - 10);//背景条宽度减去滑块的宽度
moveBlock。onmousedown=function (e) {
startX=e.pageX;
moveBlock.style。离开了吗?moveBlock.style。左:moveBlock.style。左=& # 39;0 px # 39;;
让startLeft=方法(moveBlock.style.left);
文档。onmousemove=function (e) {
让moveX=(e。pageX - startX)比;0 ?真:假;
让moveSection=startLeft + (e。pageX - startX);//限定移动范围
如果(moveSection祝辞=0,,moveSection & lt;=moveMax) {
让比例=((startLeft + (e。pageX - startX))/moveMax) .toFixed (4) * 100;
percent.toString ()。长度比;5吗?%=percent.toString ()。subStr (0 5): %=percent.toString ();
moveBlock.style。左=startLeft + (e。pageX - startX) + & # 39; px # 39;;
proBar.style。宽度=moveBlock.style.left;
moveBlock.querySelector (& # 39; p # 39;)。innerText=% + & # 39;实现% & # 39;;
}
};
};//鼠标松开移除事件
moveBlock。onmouseup=function () {
文档。onmousemove=零;
};
})();
& lt;/script>
& lt;/html>
这篇文章主要介绍js实现滑动进度条的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
具体代码如下:
进度条:
以上是js实现滑动进度条的方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
