您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)JS怎么實現(xiàn)音量控制拖動,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
具體內(nèi)容如下
描述:
JS——實現(xiàn)音量控制拖動
1)、有底條,有拖拽按鈕
2)、設(shè)置最小和最大值
3)、拖動定位后,拋出事件當(dāng)前的所在值
效果:
實現(xiàn):
<!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>當(dāng)前位置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;//標(biāo)記狀態(tài) 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;//鼠標(biāo)按下拖動的位置 } function mouseMoveclickHandler(e) { if(index===1){ moveL=e.clientX-mouseX;//鼠標(biāo)移動 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 = '當(dāng)前位置' + Math.ceil(bili) + '%'; evt.elem=this;//當(dāng)前指向 對象 document.dispatchEvent(evt);//朝誰發(fā)送 拋發(fā) } } function mouseUpclickHandler(e) { index=0; evt.elem=this;//當(dāng)前指向 對象 document.dispatchEvent(evt);//朝誰發(fā)送 拋發(fā) } 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='當(dāng)前位置'+ Math.ceil(bili)+'%'; evt.elem=this;//當(dāng)前指向 對象 document.dispatchEvent(evt);//朝誰發(fā)送 拋發(fā) } function changeHandler(e) { console.log(e); } </script> </body> </html>
關(guān)于“JS怎么實現(xiàn)音量控制拖動”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。