本文实例为大家分享了js调节音量滑块的具体代码,供大家参考,具体内容如下
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>