ホームページ > 記事 > ウェブフロントエンド > jsで音量スライダーを調整する方法
まず、効果を見てみましょう:
(推奨チュートリアル: javascript チュートリアル)
html コード:
<body> <div class="all"> <p>当前位置0%</p> <div class="bar"> <div class="box"></div> </div> </div> </body>
css コード:
<style> .all { width: 500px; height: 80px; margin: 100px auto; position: relative; } .bar { width: 500px; height: 20px; border-radius: 10px; background: #aaa; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; cursor: pointer; } .box { width: 30px; height: 30px; background: #000; position: absolute; bottom: 0; top: 0; margin: auto 0; border-radius: 50%; cursor: pointer; transition: left 0.1s linear 0s; } </style>
js コード:
<script> var box = document.getElementsByClassName('box')[0] var bar = document.getElementsByClassName('bar')[0] var all = document.getElementsByClassName('all')[0] var p = document.getElementsByTagName('p')[0] var cha = bar.offsetWidth - box.offsetWidth box.onmousedown = function (ev) { let boxL = box.offsetLeft let e = ev || window.event //兼容性 let mouseX = e.clientX //鼠标按下的位置 window.onmousemove = function (ev) { let e = ev || window.event let moveL = e.clientX - mouseX //鼠标移动的距离 let newL = boxL + moveL //left值 // 判断最大值和最小值 if (newL < 0) { newL = 0 } if (newL >= cha) { newL = cha } // 改变left值 box.style.left = newL + 'px' // 计算比例 let bili = newL / cha * 100 p.innerHTML = '当前位置' + Math.ceil(bili) + '%' return false //取消默认事件 } window.onmouseup = function () { window.onmousemove = false //解绑移动事件 return false } return false }; // 点击音量条 bar.onclick = function (ev) { let left = ev.clientX - all.offsetLeft - box.offsetWidth / 2 if (left < 0) { left = 0 } if (left >= cha) { left = cha } box.style.left = left + 'px' let bili = left / cha * 100 p.innerHTML = '当前位置' + Math.ceil(bili) + '%' console.log(left) return false } </script>
さらにクールな JavaScript 特殊効果コードは、次の場所から入手できます。 javascript特殊効果
以上がjsで音量スライダーを調整する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。