標籤：pos list get oct start var auto html back
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>乾貨-課程-完成</title> <style> ul.lanren{ margin:40px auto; } .scale_panel{ color:#999; position:absolute; line-height:18px; left:60px;top:-0px; } .scale_panel>span:first-child{ position: absolute; left: -50px; font-size: 20px; } .scale_panel>span:nth-child(2){ position: absolute; right: -50px; font-size: 20px; } .scale>span{ background-color: red; width:30px; height:30px; position:absolute; left:-2px;top:-15px; cursor:pointer; border-radius: 50%; font-size: 20px; } .scale{ background-color: #eee; border-left: 1px #83BBD9 solid; width: 430px; height: 10px; position: relative; border-radius: 20px; } .scale>div{ background-repeat: repeat-x; background-color: red; /*進度條顏色*/ width: 0px; position: absolute; height: 10px; width: 0; left: 0; bottom: 0; border-radius: 20px; } .lanren>li{ margin-left: 3.50px; position:relative; list-style:none; font-size: 30px; } #title{ position: absolute; top: 20px; left: 30px; }</style></head><body> <!-- 可拖拽進度條 --> <ul class="lanren"> <li><span id="title">0</span> <div class="scale_panel"> <div class="scale" id="bar"> <div></div> <span id="btn"></span> </div> </div> </li> </ul> <script src="../lib/[email protected]@hash"></script> <script>// 進度條代碼var scale = function (btn,bar,title){ this.btn=document.getElementById(btn); this.bar=document.getElementById(bar); this.title=document.getElementById(title); this.step=this.bar.getElementsByTagName("div")[0]; this.init();};scale.prototype={ init:function (){ var f=this,g=document,b=window,m=Math; f.btn.ontouchstart=function (e){ var x=(e||b.event).touches[0].clientX; var l=this.offsetLeft; var max=f.bar.offsetWidth-this.offsetWidth; g.ontouchmove=function (e){ var thisX=(e||b.event).touches[0].clientX; var to=m.min(max,m.max(-2,l+(thisX-x))); f.btn.style.left=to+‘px‘; f.ondrag(m.round(m.max(0,to/max)*100),to); b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty(); }; g.ontouchend=new Function(‘this.onmousemove=null‘); }; }, ondrag:function (pos,x){ this.step.style.width=Math.max(0,x)+‘px‘; this.title.innerHTML=pos+‘%‘; }}new scale(‘btn‘,‘bar‘,‘title‘);// });</script></body></html>
移動端滑動條（原生JS）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
