原生js+css调节音量滑块


Posted in Javascript onJanuary 15, 2020

本文实例为大家分享了js调节音量滑块的具体代码,供大家参考,具体内容如下

效果

原生js+css调节音量滑块

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
解析JavaScript中的不可见数据类型
Dec 02 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
基于vue实现分页/翻页组件paginator示例
Mar 09 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
详解Node.JS模块 process
Aug 31 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 #Javascript
JS函数进阶之继承用法实例分析
Jan 15 #Javascript
JS函数进阶之prototy用法实例分析
Jan 15 #Javascript
JS函数基本定义与用法示例
Jan 15 #Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 #Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 #Javascript
vue移动端使用canvas签名的实现
Jan 15 #Javascript
You might like
VOLVO车载收音机
2021/03/02 无线电
关于时间计算的结总
2006/12/06 PHP
PHP 中的批处理的实现
2007/06/14 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
分享一个常用的Python模拟登陆类
2015/03/29 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
桥梁与隧道工程专业本科生求职信
2013/10/08 职场文书
学校门卫管理制度
2014/01/30 职场文书
元旦晚会策划方案
2014/02/18 职场文书
城管大队整治方案
2014/05/06 职场文书
企业晚会策划方案
2014/05/29 职场文书
财务会计专业自荐书
2014/06/30 职场文书
2014年保洁工作总结
2014/11/24 职场文书
网络营销实训总结
2015/08/03 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android