まず、効果を見てみましょう: (推奨チュートリアル: javascript チュートリアル) html コード: 当前位置0% ログイン後にコピーcss コード: .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; } ログイン後にコピーjs コード: 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 } ログイン後にコピーさらにクールな JavaScript 特殊効果コードは、次の場所から入手できます。 javascript特殊効果
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
