原生js+css调节音量滑块
作者：孙华鹏 时间：2024-04-29 13:17:52
本文实例为大家分享了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>
来源：https://blog.csdn.net/weixin_41770018/article/details/80968384
标签：js,滑块
0
投稿猜你喜欢
asp事务处理的另外一个方法
2010-05-27 12:18:00
在Python中os.fork()产生子进程的例子
2022-08-12 18:15:27
python基础面试题整理
2023-11-03 02:09:45
深入理解Vue 的条件渲染和列表渲染
2024-04-09 10:46:37
vue实现选择商品规格功能
2024-05-13 09:37:55
python实现随机梯度下降（SGD）
2021-04-15 19:41:20
图文详解Python如何导入自己编写的py文件
2022-07-08 21:59:28
Python Matplotlib 基于networkx画关系网络图
2021-04-03 04:49:26
python中实现php的var_dump函数功能
2023-11-16 07:11:04
VueX浏览器刷新如何实现保存数据
2024-04-30 10:24:35
在thinkphp5.0路径中实现去除index.php的方式
2024-05-11 09:54:34
vue中英文切换实例代码
2024-05-29 22:29:37
php 时间计算问题小结
2023-11-03 14:37:06
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2023-05-04 05:09:51
解决python3 安装完Pycurl在import pycurl时报错的问题
2023-08-23 10:40:08
php多任务程序实例解析
2023-11-18 00:22:09
python 实现一个贴吧图片爬虫的示例
2023-03-01 08:43:28
MySQL性能优化的一些技巧帮助你的数据库
2024-01-20 12:44:22
python的debug实用工具 pdb详解
2021-04-16 10:31:17
python有序查找算法 二分法实例解析
2023-04-15 07:55:36
