原生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的IE和Firefox兼容性汇编
Jul 01 Javascript
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
layui实现数据分页功能
Jul 27 Javascript
JS实现横向跑马灯效果代码
Apr 20 Javascript
vue中jsonp插件的使用方法示例
Sep 10 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生成随机密码
2015/10/30 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
PHP查询分页的实现代码
2017/06/09 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
Javascript 面向对象特性
2009/12/28 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
JsDom 编程小结
2011/08/09 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
HTML的select控件美化
2017/03/27 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
python装饰器使用方法实例
2013/11/21 Python
python静态方法实例
2015/01/14 Python
Python对列表去重的多种方法(四种方法)
2017/12/05 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
keras slice layer 层实现方式
2020/06/11 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
中学生期末评语
2014/02/03 职场文书
医院总经理岗位职责
2014/02/04 职场文书
阳光体育活动方案
2014/02/16 职场文书
家长建议怎么写
2014/05/15 职场文书
档案保密承诺书
2014/06/03 职场文书
施工安全汇报材料
2014/08/17 职场文书
社会发展项目建议书
2014/08/25 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书