本文实例讲述了射流研究…实现的两个滑块区间拖动效果代码。分享给大家供大家参考，具体如下：

网页上的滑块功能如何实现呢？其实用射流研究…就可以，这就是一个网页滑块，两个滑块可以任意拖动，形成一个滑块区间，而且代码兼容工业管理学(工业工程)和其它主流的浏览器，两个滑块确定一个区间范围。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-hkqj-td-style-codes/

具体代码如下：

！DOCTYPE html html hearteta charset=' utf-8 '/title js双滑块区间/title style type=' text/CSS ' # range { position : relative；宽度宽度：148像素宽度：2像素字体大小：0；线高：0;背景# fffborder:1px插图# 9c 9 b 97 } # MeaBox {位置：绝对值；宽度宽度：148像素宽度：4像素背景# ccctop :-2px；border:1px插图# 9c 9 b97边框-左侧：0;右边框：0;}.mea { position : absolutetop :-5px；宽度：2 px高度：10pxborder:3px实心# fffborder-top:13px实心# 3f8e 55 } # mea _ l { left :0 } # mea _ r { right :0 border-top :13 px实心# ff 0000 }/style/headdydiv id=' range ' div id=' MeaBox ' on mouse down=' change(this，event)'/div id=' mea _ l ' class=' mea ' on mouse down=' change(this，event)'/div id=' mea ' on mouse down=' change(this，event)'/div脚本类型=' text/JavaScript ' var $ id=function(o){ return document。getelementbyid(o)| | o；}var变化=函数(o，e){ var e=e？e : window.eventif(！窗户。event(){ e . prevent default()；} var init={ mX: o.offsetLeft，lX: $id('mea_l ').offsetLeft，rX: $id('mea_r ').offsetLeft，dx : e . client x }；文件。onmousemove=function(e){ var e=e？e : window . event var dist=e . client x-init . Dx，len=init.mX dist，l_x=init.lX，r _ x=init . rxswitch(o . id){ case ' mea _ l ' : l _ x=init。Lx距离；move()；打破；case ' mea _ r ' : r _ x=init。Rx distmove()；打破；case ' meaBox ' : l _ x=init。Lx距离；r _ x=init . Rx dist move 2()；打破；default: break}函数move(){ if(r _ x l _ x 20 len=0 len=140){ o . style。left=len ' px$ id(' MeaBox ')。风格。left=l _ x ' px$ id(' MeaBox ')。风格。width=r _ x-l _ x ' px '；} };函数move 2(){ if(l _ x=0 r _ x=140){ o . style。left=len ' px$ id(' mea _ l ')。风格。left=l _ x ' px$ id(' mea _ r ')。风格。left=r _ x ' px} };}文档。onmouseup=function(){ document。onmousemove=nulldocument.onmouseup=null} }/脚本/正文/html希望本文所述对大家Java脚本语言程序设计有所帮助。