Js实现网页上拖动滑块选择范围的插件代码

发布时间：2018-08-20 02:06:29 所属栏目：交互来源：站长网

导读：Js实现网页上拖动滑块选择范围的插件代码，在网页放置一个带标尺的滑块，用鼠标拖动滑块可选择数值的范围，一个人性化的应用，代码关键处有注释，请认真参阅。本效果在IE6/7/8、火狐（firefox）下测试通过，兼容性非常不错，欢迎使用。演示： !DOCTYPE ht

　　Js实现网页上拖动滑块选择范围的插件代码，在网页放置一个带标尺的滑块，用鼠标拖动滑块可选择数值的范围，一个人性化的应用，代码关键处有注释，请认真参阅。本效果在IE6/7/8、火狐（firefox）下测试通过，兼容性非常不错，欢迎使用。

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>拖动滑块选择范围的网页插件代码</title> <base href=http://www.veryhuo.com> <script type="text/javascript"> function $(cID) { return document.getElementById(cID); } function SeekTp(oObj,nLorT) { if (nLorT==0) { var nPosition=oObj.offsetLeft; } else { var nPosition=oObj.offsetTop; } if(oObj.offsetParent!=null){ nPosition+=SeekTp(oObj.offsetParent,nLorT); } return nPosition; } function StopMove() { document.onmousemove=null; } function RecoMove(oObj,e) { ev=e?e:window.event; var nOldX=ev.clientX; var nOldP=oObj.offsetLeft; var nSPpx=nStep/(nMaxBound-nMinBound)*$('lineCont').offsetWidth; nSPpx=nSPpx<6?(5):nSPpx; document.onmouseup=StopMove; document.onmousemove=function(e) { ev=e?e:window.event; var nTemX=ev.clientX-nOldX; var cOpc=nTemX<0?'-':'+'; nMove=Math.round(Math.abs(nTemX)/nSPpx)*nSPpx; nMove=nTemX<0?nMove*-1:nMove*1; $('minBound').value=nMove; if ((oObj.offsetLeft>=SeekTp($('lineCont'),0)-5)&&(oObj.offsetLeft<=SeekTp($('lineCont'),0)+$('lineCont').offsetWidth-5)) { var oTemE=oObj.id=='minArw'?$('maxArw'):$('minArw'); var lEva; if (oTemE==$('maxArw')) { lEva=eval(oObj.offsetLeft+5+nSPpx<oTemE.offsetLeft); if (nMove+SeekTp($('lineCont'),0)<oObj.offsetLeft) { lEva=true; } } else { lEva=eval(oObj.offsetLeft>=oTemE.offsetLeft+5+nSPpx); if (oObj.offsetLeft+5<SeekTp($('lineCont'),0)+$('lineCont').offsetWidth+nMove) { lEva=true; } }// 烈,火.網 liehuo.net 欢迎复制,拒绝恶意采集ｌｉｅｈｕｏ．ｎｅｔ if (lEva) { oObj.style.left=nOldP+nMove+'px'; } } if (oObj.offsetLeft<SeekTp($('lineCont'),0)-5) { oObj.style.left=SeekTp($('lineCont'),0)-5+'px'; } if (oObj.offsetLeft>SeekTp($('lineCont'),0)+$('lineCont').offsetWidth-5) { oObj.style.left=SeekTp($('lineCont'),0)+$('lineCont').offsetWidth-5+'px'; } $('SbLine').style.left=$('minArw').offsetLeft+5+'px'; $('SbLine').style.width=$('maxArw').offsetLeft-$('minArw').offsetLeft+'px'; oMinResult.value=parseInt(($('SbLine').offsetLeft-SeekTp($('lineCont'),0))/$('lineCont').offsetWidth*(nMaxBound-nMinBound)+nMinBound); oMaxResult.value=parseInt(($('SbLine').offsetLeft-SeekTp($('lineCont'),0)+$('SbLine').offsetWidth)/$('lineCont').offsetWidth*(nMaxBound-nMinBound)+nMinBound); $('LiveValue').innerHTML=oMinResult.value+' - '+oMaxResult.value; } } var oMinResult,oMaxResult function CreateSlideBar(cTargetObj,cMinResult,cMaxResult) { var oTargetObj=$(cTargetObj); oMinResult=$(cMinResult); oMaxResult=$(cMaxResult); var oSbContainer=document.createElement('div'); oSbContainer.style.cssText='overflow:auto;background: url(/uploads/allimg/1101/calib.gif) no-repeat 10px 30px;width:220px;height:100%;'; oTargetObj.appendChild(oSbContainer); oSbContainer.innerHTML='<div id="lineCont"><div id="SbLine"></div></div> <div id="minArw" onmousedown="RecoMove(this,event);"></div> <div id="maxArw" onmousedown="RecoMove(this,event);"></div> <div style="float:left;">'+nMinBound+'</div><div style="float: right">'+nMaxBound+'</div><div id="LiveValue" style="text-align:center;font-weight:bold;"></div>'; $('lineCont').style.cssText='margin:10px 10px 20px;border:#666 solid 1px;width:198px;height:5px;'; $('SbLine').style.cssText='position:absolute;background: url(/uploads/allimg/1101/line.gif) repeat-x;height:5px;'; $('minArw').style.cssText='position:absolute;background: url(/uploads/allimg/1101/arrows.gif) no-repeat;cursor:pointer;width:10px;height:20px;'; $('maxArw').style.cssText='position:absolute;background: url(/uploads/allimg/1101/arrows.gif) no-repeat;cursor:pointer;width:10px;height:20px;'; $('minArw').style.left=SeekTp($('lineCont'),0)-5+'px'; $('minArw').style.top=SeekTp($('lineCont'),1)-5+'px'; $('maxArw').style.left=SeekTp($('lineCont'),0)+$('lineCont').offsetWidth-5+'px'; $('maxArw').style.top=SeekTp($('lineCont'),1)-5+'px'; $('SbLine').style.width=$('lineCont').offsetWidth+'px'; oMinResult.value=nMinBound; oMaxResult.value=nMaxBound; } </script> </head> <body> <div id="egDiv" style="margin:auto;width: 500px;"> <button type="button" onclick="alert('您选择的范围是：'+$('minBound').value+'到'+$('maxBound').value+'！');">查看结果</button> <input type="hidden" id="minBound" value="0" size="6"> <input type="hidden" id="maxBound" value="100" size="6"> </div> <script type="text/javascript"> var nMinBound=0;//开始位置 var nMaxBound=100;//结束位置 var nStep=5;//步长 CreateSlideBar('egDiv','minBound','maxBound'); //添加的父对象,赋值的对象(最小,最大) </script> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：新余站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

物联网和超宽带如何合	酒店业的五大物联网自
物联网传感器提高车队	保护物联网设备的优秀