原生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+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
jQuery同步提交示例代码
Dec 12 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
May 09 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
Aug 28 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
Vue+axios 实现http拦截及路由拦截实例
Apr 25 Javascript
ECMAscript 变量作用域总结概括
Aug 18 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
layui select 禁止点击的实现方法
Sep 05 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
JavaScript实现alert弹框效果
Nov 19 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
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
php面向对象中的魔术方法中文说明
2014/03/04 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
推荐几个开源的微信开发项目
2014/12/28 PHP
js身份证验证超强脚本
2008/10/26 Javascript
js form 验证函数 当前比较流行的错误提示
2009/06/23 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
jQuery EasyUI API 中文文档 - Form表单
2011/10/06 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python实现建立SSH连接的方法
2015/06/03 Python
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
大学校园生活自我鉴定
2014/01/13 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
导游词300字
2015/02/13 职场文书
工作失职自我检讨书
2015/05/05 职场文书
银行求职信范文
2019/05/13 职场文书
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏
Golang 实现WebSockets
2022/04/24 Golang