幽灵资源网 Design By www.bzswh.com
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?