JS实现音量控制拖动
编程学习 2021-07-04 15:02www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了JS实现音量控制拖动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：js实现中文实时时钟
下一篇：基于vue.js实现购物车