本文实例为大家分享了js实现滑动进度条效果的具体代码，供大家参考，具体内容如下
进度条：
<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>js滑动进度条效果</title><style>*{margin:0;padding:0;user-select:none;}.progress-bar{position:relative;height:10px;width:400px;margin:200pxauto;background:#ebeef5;border-radius:10px;}.progress-bar.pro-bar{position:absolute;left:0;height:10px;width:10px;background:#409eff;}.progress-bar.min-num{position:absolute;left:-20px;top:-5px;}.progress-bar.max-num{position:absolute;right:-40px;top:-5px;}.progress-bar.block{position:absolute;height:30px;width:10px;background:#ccc;top:-10px;border-radius:10px;}.progress-bar.blockp{position:absolute;display:none;left:-20px;top:-45px;width:50px;height:30px;text-align:center;line-height:30px;background:#ccc;border-radius:20px;}.progress-bar.block:hoverp{display:block;font-size:10%;color:#fff;background:#409eff;}</style></head><body><pclass="progress-bar"><spanclass="min-num">0</span><spanclass="max-num">100</span><pclass="pro-bar"></p><pclass="block"><p>0</p></p></p></body><script>(function(){letmoveBlock=document.querySelector('.block');letproBar=document.querySelector('.pro-bar');letflag=false;letstartX=null;letmoveMax=(400-10);//背景条宽度减去滑块的宽度moveBlock.onmousedown=function(e){startX=e.pageX;moveBlock.style.left?moveBlock.style.left:moveBlock.style.left='0px';letstartLeft=parseInt(moveBlock.style.left);document.onmousemove=function(e){letmoveX=(e.pageX-startX)>0?true:false;letmoveSection=startLeft+(e.pageX-startX);//限定移动范围if(moveSection>=0&&moveSection<=moveMax){letpercent=((startLeft+(e.pageX-startX))/moveMax).toFixed(4)*100;percent.toString().length>5?percent=percent.toString().subStr(0,5):percent=percent.toString();moveBlock.style.left=startLeft+(e.pageX-startX)+'px';proBar.style.width=moveBlock.style.left;moveBlock.querySelector('p').innerText=percent+'%';}};};//鼠标松开移除事件moveBlock.onmouseup=function(){document.onmousemove=null;};})();</script></html>
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：http://www.chanpinyuan.cn/42765.html；