拖动滑块效果：

先看看效果图：

！doctype html html head meta charset=' UTF-8 '/meta name=' viewport ' content=' width=设备宽度，初始比例=1，最小比例=1，最大比例=1，用户比例=无'/title文档/title脚本类型=' text/JavaScript ' src=' http : '/脚本样式类型=' text/CSS '输入[type=' range ']{ width : 80%；背景-颜色：红色；边框半径： 15px-web套件-apparence :无；高度： 1px相对位置：-webkit-box-sizing:边框-盒子；-moz-box-siz :边框盒；盒子尺寸：边框盒子；}输入[type=' range ']:-web kit-slider-thumb {-web kit-apparence : none；背景-颜色：绿色；边界半径： 50%;高度： 30px宽度： 30pxbox-shadow: 0 1px 3px rgba(0，0，0，4);border:无；相对位置：z指数： 10；}/样式脚本类型=' text/JavaScript ' $(function(){ $(').input _ 1’).change(function() { $('p.p1 ')).文本($(这个).val())；})设置间隔(函数(){ $('p.p2 ').文本($(')。input _ 2’).val())；},0.01)})/脚本/头体p添加变化事件/p输入类型='范围'步长='0.01 '最小值='0 '最大值='5 '值='0' p0/p p添加定时器/p输入类型='范围'步长='0.01 '最小值='0 '最大值='5 '值=' 0 ' P0/p/body/html(9501 . 163.com)

！DOCTYPE html html hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 ' meta name=' viewport ' content=' width=设备宽度，初始比例=1,最小比例=1,最大比例=1,用户可缩放=无/title鼠标拖动小方块/titlestyle 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}/样式/头部身体中心3用鼠标拖动小方块span id=' msg ' 0/span %/H3/中心div id=' LineDiv ' div id=' MinDiv ' div id=' vals ' 0/div/div/div script window。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 xvar 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 left var top=node . offsettopcurrent=node.offsetParent//取得元素的offsetParent //一直循环直到根元素而(当前！=null){ left=当前。offsetlefttop=current . offsetopcurrent=current . offsetparent }返回{‘左’:左，‘顶’:顶}；} }/脚本/正文/html兼容个人电脑端和移动端

！DOCTYPE html html hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 ' meta name=' viewport ' content=' width=设备宽度，初始比例=1,最小比例=1,最大比例=1,用户可缩放=无/title鼠标拖动小方块/titlestyle 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}/样式/头部身体中心3用鼠标拖动小方块span id=' msg ' 0/span %/H3/中心div id=' LineDiv ' div id=' MinDiv ' div id=' vals ' 0/div/div/div script window。onload=function(){ var line div=document。getelementbyid(' LineDiv ')；//长线条var minDiv=文档。getelementbyid(' MinDiv ')；//小方块var msg=文档。getelementbyid(' msg ')；var vals=文档。getelementbyid(' vals ')；var ifBool=false//判断鼠标是否按下//事件var start=function(e){ e . stopperpagation()；ifBool=trueconsole.log('鼠标按下)} var move=function(e){ console。日志('鼠标拖动)if(ifBool) {if(！e . touch){//兼容移动端var x=e.clientX} else { //兼容个人电脑端var x=e . touch[0]。pageX }//var x=e . touch[0]。e.clientX//鼠标横坐标var xvar 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)；} } var end=function(e){ console。日志('鼠标弹起)ifBool=false}//鼠标按下方块明迪夫。addeventlistener(' touch start '，start)；明迪夫。addeventlistener('鼠标按下，开始)；//拖动窗户。addeventlistener(' touch move '，move)；窗户。addeventlistener('鼠标移动'，移动)；//鼠标松开窗户。addeventlistener(' touch end '，end)；窗户。addeventlistener('鼠标上移'，结束)；//获取元素的绝对位置函数getPosition(node){ var left=node。offsetleft//获取元素相对于其父元素的左边的值var left var top=node . offsettopcurrent=node.offsetParent//取得元素的offsetParent //一直循环直到根元素而(当前！=null){ left=当前。offsetlefttop=current . offsetopcurrent=current . offsetparent }返回{‘左’:左，‘顶’:顶}；} }/脚本/正文/html设置滑块的滑动范围

！DOCTYPE html html health eta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8 ' meta name=' viewport ' content=' width=设备宽度，初始比例=1,最小比例=1,最大比例=1,用户可缩放=无/title鼠标拖动小方块/titlestyle type='text/css ' .lineDiv {位置：相对；高度： 5px背景：红色；宽度： 95%;余量： 50px自动；} .lineDiv .minDiv {position:绝对值；top :-15px；左： 0；宽度： 35px高度： 35px背景：绿色；光标：指针；过渡：全0;} .lineDiv .vals { z-index : 100绝对位置：top: 0pxleft: 0px宽度： 0px高度： 5px背景：蓝色；}/样式/头部身体中心3用鼠标拖动小方块span id=' msg ' 0/span %/H3/中心div id=' LineDiv ' div id=' vals '/div！- - div id='minDiv'/div！- /div脚本窗口。onload=function(){ var line div=document。getelementbyid(' line div ')；//长线条var minDiv=文档。getelementbyid(' MinDiv ')；//小方块var minVals=文档。getelementbyid(' vals ')；//左长线var msg=文档。getelementbyid(' msg ')；//最上面的信息var ifBool=false//判断滑块是否按下var line div _ W=GetPosition(line div).宽度；//长线的长度var line div _ L=GetPosition(line div).向左；//长线距离超文本标记语言的左var minDiv_W=getPosition(minDiv).宽度；//滑块的长度var minDiv_L=getPosition(minDiv).向左；//滑块距离超文本标记语言的左var Slider _ W _ MAX=line div _ W-minDiv _ W；//滑块可以滑动的最大值px，范围是0 ~ Slider _ W _ MAX var minNum=0//最小值var maxNum=500//最大值var startNum=100//起始值var endNum=400//结束值var min _ Px=Slider _ W _ MAX/maxNum * startNum；//滑块可以滑动的最小pxvar MAX _ Px=Slider _ W _ MAX/maxNum * endNum；//滑块可以滑动的最大px var minDiv _ left=0；//当前滑块的位置/*滑块_W_MAX 1元对应的px？1 maxNum 1 1px对应的金额？*/函数initSlider(initPX) { //设置滑块的初始位置控制台。日志(initPX)；minDiv _ left=initPX//设置滑块的位置明迪夫。风格。left=initPX ' pxminvals。风格。width=initPX ' px味精。inner text=parsent(initPX/Slider _ W _ MAX * 100)；} (function() { //初始化滑块位置if(startNum=0) { //求出startNum对应的pxinitSlider(Slider _ W _ MAX/maxNum * startNum)} })()//事件var start=函数(e){ ifBool=true；//console.log('鼠标按下)} var move=function(e){//console。日志('鼠标拖动)if(ifBool){ var x；//记录滑块距离超文本标记语言的距离leftif(！e . touch){//兼容个人电脑端x=e.clientX} else { //兼容移动端x=e .触摸[0].pageX } MinDiv _ left=x-LineDiv _ L；//小方块相对于父元素（长线条)的左边的值if(minDiv _ left=Slider _ W _ MAX){ minDiv _ left=Slider _ W _ MAX；} if(minDiv _ left 0){ minDiv _ left=0；} //设置拖动后小方块的左边的值init slider(minDiv _ left)} } var end=function(e){ if(minDiv _ left max _ Px){ init slider(max _ Px)；} if(MinDiv _ left min _ Px){ initSlider(min _ Px)；} ifBool=false}//鼠标按下方块明迪夫。addeventlistener(' touch start '，start)；明迪夫。addeventlistener('鼠标按下，开始)；//拖动窗户。addeventlistener(' touch move '，move)；窗户。addeventlistener('鼠标移动'，移动)；//鼠标松开窗户。addeventlistener(' touch end '，end)；窗户。addeventlistener('鼠标上移'，结束)；//获取元素的绝对位置函数getPosition(node){ var width=node。在两者之间；//元素宽度可变高度=node.offsetHeight//元素高度var left=node.offsetLeft//获取元素相对于其根元素的左边的值var left var top=node.offsetTop//获取元素相对于其根元素的顶端值var顶部电流=节点。offsetparent//取得元素的offsetParent //一直循环直到根元素而(当前！=null){ left=当前。offsetlefttop=current . offsetopcurrent=current . offsetparent }返回{'width': width，' height': height，' left': left，' top ' : top }；} }/脚本/正文/html点击水波纹效果：

！DOCTYPE html html head meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8 ' title js/title link rel='样式表type=' text/CSS ' href=' CSS/reset。CSS ' rel='外部无跟随'/脚本类型=' text/JavaScript ' src=' http : '/脚本样式类型=' text/CSS ' media=' screen ' ul { font-size 3360 0；相对位置：padd : 0；宽度： 480像素；余量： 40px自动；用户选择：无；} li {显示：内联块；宽度： 160像素；高度： 60px背景技术# e 95546 font-size : 16px；文本对齐：中心；线高： 60px颜色：白色；文本转换：大写；相对位置：飞越：隐藏；光标：指针；} .滑块{显示：块；绝对位置：底部： 0；左： 0；高： 4px背景技术# 1685D3transition:全部0.5s}。波纹{ width : 0；高度： 0;边界半径： 50%;背景： rgba(255，255，255，0.4)；-webkit-transform:刻度(0);-ms-transform:刻度(0);变压器：刻度(0);绝对位置：opa城市3360 1；} .rippleEffect {-网页套件-动画： rippleDrop。4s线性；animation: rippleDrop .4s线性；} @-网络工具包-关键帧rippleDrop { 100% }-web工具包-transform :比例(2);变压器：标尺(2);opa城市3360 0；} } @关键帧rippleDrop { 100% }-web工具包-transform :比例(2);变压器：标尺(2);opa城市3360 0；} }/样式/头体礼券列表项目一/li li项目二/li li项目三/Li Li class=' slider '/Li/ul/body script $(' ul Li ').点击（函数{ if($(this)).有类('滑块'){ return} var whatab=$(this).index()；var howFar=160 * whatTab$('。滑块')。CSS({左：多远' px ' })；$('.波纹').移除();var posX=$(this).偏移量()。左，posY=$(this).偏移量()。top，buttonWidth=$(this).宽度()，按钮高度=$(这个).高度();console.log(posX，posY，buttonWidth，buttonHeight) $(this).追加(' span class=' ripple '/span ')；if(按钮宽度=按钮高度){按钮高度=按钮宽度；} else {按钮宽度=按钮高度；} var x=e . pagex-POSx-按钮宽度/2；var y=e . pagey-POSy-按钮高度/2；$('.波纹').css({ width: buttonWidth，height: buttonHeight，top: y 'px '，left: x 'px' }).添加类(' rippleEffect ')；});/script /html