溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關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怎么實現音量控制拖動”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
