原生js+css调节音量滑块
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
我试图写一个简单的应用程序，播放声音，可以改变音量的声音在任何时候播放。我通过将声音字节数组中的每对字节转换成一个整数，然后将这个整数乘以音量的增加或减少，然后将它们写回为两个字节（即1个样本）。然而，这导致了声音的极度失真。有没有可能我把位移错了？我的声音格式是： 这段代码的基础是：audio：改变字节数组中样本的音量，而asker正试图在其中执行相同的操作。然而，使用了他的问题中的代码（我认为
-
本文向大家介绍原生JS实现平滑回到顶部组件，包括了原生JS实现平滑回到顶部组件的使用技巧和注意事项，需要的朋友参考一下 返回顶部组件是一种极其常见的网页功能，需求简单：页面滚动一定距离后，显示返回顶部的按钮，点击该按钮可以将滚动条滚回至页面开始的位置。 实现思路也很容易，只要改变document.documentElement.scrollTop或document.body.scrollTop的值
-
本文向大家介绍原生js和css实现图片轮播效果，包括了原生js和css实现图片轮播效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了javascript图片轮播效果的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍ReactNative-JS 调用原生方法实例代码，包括了ReactNative-JS 调用原生方法实例代码的使用技巧和注意事项，需要的朋友参考一下 第一步首先创建ReactNative 模块类继承ReactContextBaseJavaModule 第二步创建一个React包管理器实现ReactPackage将每个模块放到模块集合中 第三步在应用入口注册这个React包管理器 第四
-
能否使用原生CSS+JS实现如图的滑动效果——自动吸附和状态栏的变化(字体向左移动并变黑，部分元素消失出现以及下方的这条横线) 感谢各位大佬
-
本文向大家介绍原生javascript 学习之js变量全面了解，包括了原生javascript 学习之js变量全面了解的使用技巧和注意事项，需要的朋友参考一下 1.变量的命名 方法的命名(驼峰命名法) 全部小写 ： 单词与单词之间全部下划线 (my_namespace) 大小写混合 : 第一个单词首字母小写其他单词首字母大写。 规则 首字符 英文字母或下划线 组成 英文字母 数字 下划线
-
这是 事件监听，也是用docment对全局进行鼠标的移动及抬起监听了。 这是CSS，使用absolute对滑块进行定位
-
本文向大家介绍用原生js做个简单的滑动效果的回到顶部，包括了用原生js做个简单的滑动效果的回到顶部的使用技巧和注意事项，需要的朋友参考一下 很多网页在下方都会放置一个“返回顶部”按钮，尤其是页面底部没有导航的网页，这样可以帮助访客重新找到导航或者重温一遍广告（想得真美）。随着近几年来 JavaScript 的应用日渐广泛，滑动效果无处不在，于是我也跟跟风，将返回顶部功能做成了滑动效果。后来为了更贴