js实现可拖拽进度条

来源：互联网 2023-03-16 23:57:39 版权归原作者所有，如有侵权，请联系我们

js实现可拖拽进度条

工具/原料

adobe dreamweaver

方法/步骤

新救醒建html文档。

js实现可拖拽进度条

准备好需要用到的图标。

js实现可拖拽进度条

书写hmtl代码。ul class="lanren"> li>red span id="title">0/span> div class="scale_panel"> span class="r">100/span>0 div class="scale" id="bar">薪码 div>/div> span id="btn">/span> /div> /div> /li>/ul>

js实现可拖拽进度条

书写css代码。style>body{margin:0;padding:0;font-size:12px;}ul.lanren{width:300px;margin:100px auto;}.scale_panel{color:#999;width:200px;position:absolute;line-height:18px;left:60px;top:-0px;}.scale_panel .r{float:right;}.scale span{background:url(images/scroll.gif) no-repeat;width:8px;height:16px;position:absolute;left:-2px;top:-5px;cursor:pointer;}.scale{ background-repeat: repeat-x; background-position: 0 100%; background-color: #E4E4E4; border-left: 1px #83BBD9 solid; width: 200px; height: 3px; position: relative; font-size: 0px; border-radius: 3px; }.scale div{ background-repeat: repeat-x; background-color: #3BE3FF; width: 0px; position: absolute; height: 3px; width: 0; left: 0; bottom: 0; }.lanren li{font-size:12px;line-height:50px;position:relative;height:50px;list-style:none;}/style>

js实现可拖拽进度条

书写并添加js代码。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.onmousedown=function (e){ var x=(e||b.event).clientX; var l=this.offsetLeft; var max=f.bar.offsetWidth-this.offsetWidth; g.onmousemove=function (e){ var thisX=(e||b.event).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.onmouseup=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>

js实现可拖拽进度条