js如何实现调节音量滑块

前端  /  管理员 发布于 7年前   179

首先，我们来看一下效果：

e8bc328ab5f45cf49c16727dbfb8141.png

（推荐教程：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.offsetWidthbox.onmousedown = function (ev) {let boxL = box.offsetLeftlet e = ev || window.event //兼容性let mouseX = e.clientX //鼠标按下的位置window.onmousemove = function (ev) {let e = ev || window.eventlet 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 * 100p.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 / 2if (left < 0) {left = 0}if (left >= cha) {left = cha}box.style.left = left + 'px'let bili = left / cha * 100p.innerHTML = '当前位置' + Math.ceil(bili) + '%'console.log(left)return false}</script>

更多炫酷javascript特效代码，尽在：javascript特效

以上就是js如何实现调节音量滑块的详细内容，更多请关注其它相关文章！


  • 上一条：
    css中zoom属性有什么作用
    下一条：
    css如何修改默认滚动条样式

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客