基于Java脚本语言实现拖动滑块效果

本文实例为大家分享了射流研究…拖动滑块效果的具体代码，供大家参考，具体内容如下

效果：

代码：

！DOCTYPE html html lang=' zh-cn ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 ' meta name=' viewport ' content=' width=设备宽度，初始比例=1,最小比例=1,最大比例=1,用户可缩放=无/title鼠标拖动小方块/title style type='text/css ' .lineDiv {位置：相对；高度： 5px背景：红色；宽度： 300像素；余量： 50px自动；} .lineDiv .minDiv { position:绝对值；top :-5px；左： 0；宽度： 15px高度： 15px背景：绿色；光标：指针}。lineDiv .minDiv .vals { position:绝对值；font-size : 20pxtop :-45px；左侧：-10px；宽度： 35px高度： 35px线高： 35px文本对齐：中心；背景：蓝色；} .lineDiv .{内容： }之后的minDiv .vals:after宽度： 0px高度： 0px边框-top: 6px纯蓝；边框-左侧： 6px实心透明；右边框： 6px纯色透明；边框-底部： 6px固体透明；显示器：块；左边距left: 11px}/样式/头部身体中心h3用鼠标拖动小方块span id=' msg ' 0/span %/H3/中心div id=' LineDiv ' class=' LineDiv ' div id=' MinDiv ' class=' MinDiv ' div id=' vals ' class=' vals ' 0/div/div/div脚本窗口。onload=function(){ var line div=document。getelementbyid(' LineDiv ')；//长线条var minDiv=文档。getelementbyid(' MinDiv ')；//小方块var msg=文档。getelementbyid(' msg ')；var vals=文档。getelementbyid(' vals ')；var ifBool=false//判断鼠标是否按下//鼠标按下方块明迪夫。addeventlistener('触摸开始'，函数(e){ e . stopperpagation()；ifBool=trueconsole.log('鼠标按下') });//拖动窗户。addeventlistener('触摸移动'，函数{ console.log('鼠标拖动)if(ifBool){ var x=e . touch[0].第x | | e . touch[0]页.clientX//鼠标横坐标var x var line div _ left=GetPosition(line div).向左；//长线条的横坐标var minDiv _ left=x-LineDiv _ left；//小方块相对于父元素（长线条)的左边的值if(minDiv _ left=line div。偏移量为-15){ minDiv _ left=line div。偏移量为-15；} if(minDiv _ left 0){ minDiv _ left=0；} //设置拖动后小方块的左边的值minDiv。风格。left=minDiv _ left ' px味精。inner text=parsent((MinDiv _ left/(line div。offset witth-15))* 100)；瓦尔斯。inner text=parsent((MinDiv _ left/(line div。offset witth-15))* 100)；} });//鼠标松开窗户。addeventlistener(' touch end '，函数{ console.log('鼠标弹起)ifBool=false })；//获取元素的绝对位置函数getPosition(node){ var left=node。offsetleft//获取元素相对于其父元素的左边的值定义变量左var top=node . offsettopcurrent=node.offsetParent//取得元素的offsetParent //一直循环直到根元素而(当前！=null){ left=当前。offsetlefttop=current . offsetopcurrent=current . offsetparent }返回{‘左’:左，‘顶’:顶}；} }/脚本/正文/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。