这篇文章将为大家详细讲解有关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>
<div id="all">
<p>当前位置0%</p>
<div id="bar">
<div id="box"></div>
</div>
</div>
<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怎么实现音量控制拖动”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
