pc 端区间滑块

来源：互联网发布：程序员需要学英语吗编辑：程序博客网时间：2024/05/23 00:03
<!DOCTYPE html><html><head><meta  charset="utf-8" /><title> js双滑块区间 </title><style type='text/css'>#nhkBookbox{position:relative;width:428px;height:15px;font-size:0;line-height:0;background:#fff;border:1px solid #9C9B97}#nhkBookrod{position:absolute;width:428px;height:8px;background:#CCC;top:3px;cursor:pointer;}.rodstyle{position:absolute;top:-1px;width:9px;height:17px;}#nhkBookrodleft{left:0;background:red}#nhkBookrodright{right:0;background:blue}</style></head><body><div id='nhkBookbox'> <div id='nhkBookrod' onmousedown="nhkBook(this,event)"> </div>     <div id='nhkBookrodleft' class='rodstyle' onmousedown="nhkBook(this,event)" ></div> <div id='nhkBookrodright' class='rodstyle' onmousedown="nhkBook(this,event)" ></div></div><div id="v1">0</div><div id="v2">60</div><script type='text/javascript'>var $id=function(o){return document.getElementById(o) || o;}var nhkBook=function(o,e){var e = e ? e : window.event;if(!window.event) {e.preventDefault();}var init={mX: o.offsetLeft,lX: $id('nhkBookrodleft').offsetLeft,rX: $id('nhkBookrodright').offsetLeft,dX: e.clientX};document.onmousemove=function(e){// console.log(init.dX);// console.log('***');// console.log(e.clientX);// console.log('###');// console.log(init.mX);// console.log('===');//console.log(init.lX);var e = e ? e : window.event;var dist=e.clientX-init.dX,len=init.mX + dist,l_x=init.lX,r_x=init.rX;switch ($id(o).id){case 'nhkBookrodleft':l_x=init.lX + dist;nhkmove('l');break;case 'nhkBookrodright':r_x=init.rX + dist;nhkmove('r');break;case 'nhkBookrod':l_x=init.lX + dist;r_x=init.rX + dist;nhkrodmove();break;default: break;}function nhkmove(d){if(r_x > l_x + 15 && len>=0 && len<=420 ) {o.style.left=len+"px";$id('nhkBookrod').style.left= l_x + 'px';$id('nhkBookrod').style.width=r_x - l_x + 'px';if(d=='l')document.getElementById('v1').innerHTML =Math.round(len/7);elsedocument.getElementById('v2').innerHTML =Math.round(len/7);}};function nhkrodmove(){//console.log(o);if(l_x>=0 && r_x <=420 ) {o.style.left=len+"px";$id('nhkBookrodleft').style.left= l_x + "px";$id('nhkBookrodright').style.left= r_x +"px";document.getElementById('v1').innerHTML =Math.round(l_x/7);document.getElementById('v2').innerHTML =Math.round(r_x/7);}};}document.onmouseup=function(){document.onmousemove=null;document.onmouseup=null;}}</script></body></html>
忘记在哪里看到的了。
0 0