本文实例为大家分享了JS实现音量控制拖动的具体代码，供大家参考，具体内容如下
描述：
JS——实现音量控制拖动
1）、有底条，有拖拽按钮 2）、设置最小和最大值 3）、拖动定位后，抛出事件当前的所在值
效果：
实现：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #all { width: 500px; height: 86px; margin: 100px auto; position: relative; } #bar { width: 500px; height: 20px; border-radius: 10px; background: #9acfea; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; cursor: pointer; } #box { width: 30px; height: 30px; background: #ec971f; position: absolute; bottom: 0; top: 0; margin: auto 0; border-radius: 50%; cursor: pointer; transition: left 0.1s linear 0s; } </style></head><body> <p id="all"> <p>当前位置0%</p> <p id="bar"> <p id="box"></p> </p> </p><script> var all=document.getElementById("all");//容器 var p=document.querySelector("p");//进度百分比 var bar=document.getElementById("bar");//进度显示条 var box=document.getElementById("box");//进度按钮 var boxL,newL,moveL,mouseX,left; var cha = bar.offsetWidth - box.offsetWidth; var index=0;//标记状态 var evt=new Event("change");//本身的事件 init(); function init() { box.addEventListener("mousedown",mouseDownclickHandler); document.addEventListener("mousemove",mouseMoveclickHandler) document.addEventListener("mouseup",mouseUpclickHandler); document.addEventListener("change",changeHandler); bar.addEventListener("click",clickHandler); } function mouseDownclickHandler(e) { index=1; boxL=box.offsetLeft; mouseX=e.clientX;//鼠标按下拖动的位置 } function mouseMoveclickHandler(e) { if(index===1){ moveL=e.clientX-mouseX;//鼠标移动 newL=boxL+moveL;//left值 //判断最小值与最大值 if(newL<0){ newL = 0; } if(newL>=cha){ newL=cha; } // 改变left值 box.style.left = newL + 'px'; // 计算比例 var bili = newL / cha * 100; p.textContent = '当前位置' + Math.ceil(bili) + '%'; evt.elem=this;//当前指向 对象 document.dispatchEvent(evt);//朝谁发送 抛发 } } function mouseUpclickHandler(e) { index=0; evt.elem=this;//当前指向 对象 document.dispatchEvent(evt);//朝谁发送 抛发 } function clickHandler(e) { left = e.clientX-all.offsetLeft-box.offsetWidth/2; if(left<0){ left=0; } if(left>=cha){ left=cha; } box.style.left=left+'px'; bili=left/cha*100; p.innerHTML='当前位置'+ Math.ceil(bili)+'%'; evt.elem=this;//当前指向 对象 document.dispatchEvent(evt);//朝谁发送 抛发 } function changeHandler(e) { console.log(e); }</script></body></html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
以上就上有关JS实现音量控制拖动的相关介绍，要了解更多拖动, 音量内容请登录学步园。