JS响应鼠标点击实现两个滑块区间拖动效果

本文实例讲述了JS实现的两个滑块区间拖动效果代码。分享给大家供大家参考，具体如下：
网页上的滑块功能如何实现呢？其实用JS就可以，这就是一个网页滑块，两个滑块可以任意拖动，形成一个滑块区间，而且代码兼容IE和其它主流的浏览器，两个滑块确定一个区间范围。
运行效果截图如下：

在线演示地址如下：
http://demo.jb51.net/js/2015/js-hkqj-td-style-codes/
具体代码如下：

<！DOCTYPE html><html><head><meta charset="utf-8" /><title> js双滑块区间</title><style type="text/css">#range{position:relative;width:148px;height:2px;font-size:0;line-height:0;background:#fff;border:1px inset #9C9B97}#meaBox{position:absolute;width:148px;height:4px;background:#ccc;top:-2px;border:1px inset #9C9B97;border-left:0;border-right:0;}.mea{position:absolute;top:-5px;width:2px;height:10px;border:3px solid #fff;border-top:13px solid #3f8e55;}#mea_l{left:0;}#mea_r{right:0;border-top:13px solid #ff0000;}</style></head><body><div id="range"> <div id="meaBox" onmousedown="change（this,event）"> </div> <div id="mea_l" class="mea" onmousedown="change（this,event）" ></div> <div id="mea_r" class="mea" onmousedown="change（this,event）" ></div></div><script type="text/javascript">var $id=function（o）{return document.getElementById（o） || o;}var change=function（o,e）{ var e = e ? e : window.event; if（！window.event） {e.preventDefault（）;} var init={ mX: o.offsetLeft, lX: $id（"mea_l"）.offsetLeft, rX: $id（"mea_r"）.offsetLeft, dX: e.clientX }; document.onmousemove=function（e）{ 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 （o.id）{case "mea_l":l_x=init.lX + dist;move（）;break;case "mea_r":r_x=init.rX + dist;move（）;break;case "meaBox":l_x=init.lX + dist;r_x=init.rX + dist;move2（）;break;default: break; } function move（）{if（r_x > l_x + 20 && len>=0 && len<=140 ） {o.style.left=len+"px";$id（"meaBox"）.style.left= l_x + "px";$id（"meaBox"）.style.width=r_x - l_x + "px";} }; function move2（）{if（l_x>=0 && r_x <=140 ） {o.style.left=len+"px";$id（"mea_l"）.style.left= l_x + "px";$id（"mea_r"）.style.left= r_x +"px";} }; } document.onmouseup=function（）{ document.onmousemove=null; document.onmouseup=null; }}</script></body></html>

希望本文所述对大家JavaScript程序设计有所帮助。