原生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之一(初识Javascript)
Jan 20 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
Jul 17 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
简单理解vue中el、template、replace元素
Oct 27 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
微信小程序  http请求封装详解及实例代码
Feb 15 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 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 日志缩略名的创建函数代码
2010/05/26 PHP
比较详细PHP生成静态页面教程
2012/01/10 PHP
自定义php类(查找/修改)xml文档
2013/03/26 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
原生javascript和jquery判断浏览器版本等信息
2013/07/04 Javascript
使用javascript控制cookie显示和隐藏背景图
2014/02/12 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
Javascript实现检测客户端类型代码封包
2015/12/03 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
js实现窗口全屏示例详解
2019/09/17 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
python list删除元素时要注意的坑点分享
2018/04/18 Python
Python玩转Excel的读写改实例
2019/02/22 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
Python如何根据时间序列数据作图
2020/05/12 Python
Python 跨.py文件调用自定义函数说明
2020/06/01 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
详解Python IO编程
2020/07/24 Python
演讲稿的写法
2014/05/19 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
出差报告怎么写
2014/11/06 职场文书
2015年学生会个人工作总结
2015/04/09 职场文书
现场施工员岗位职责
2015/04/11 职场文书