原生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 相关文章推荐
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
Aug 14 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
Aug 24 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
js中数组Array的一些常用方法总结
Aug 12 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
详解使用jQuery.i18n.properties实现js国际化
May 04 jQuery
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
vue实现组件之间传值功能示例
Jul 13 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 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
50个PHP程序性能优化的方法
2014/06/02 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php字符串替换函数substr_replace()用法实例
2015/03/17 PHP
浅谈PHP的反射API
2017/02/26 PHP
Jquery 表格合并的问题分享
2011/09/17 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
大学毕业登记表自我鉴定
2013/10/09 职场文书
餐饮业会计岗位职责
2013/12/19 职场文书
中专自我鉴定
2014/02/05 职场文书
材料专业毕业生求职信
2014/02/26 职场文书
努力学习保证书
2015/02/26 职场文书
教师创先争优承诺书
2015/04/27 职场文书
电影地道战观后感
2015/06/04 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python
详解SQL的窗口函数
2022/04/21 Oracle