脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js调节音量滑块

原生js+css调节音量滑块

 更新时间：2020年01月15日 11:55:14   作者：孙华鹏  
这篇文章主要介绍了原生js+css调节音量滑块，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

效果

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JS中的六种继承方式以及优缺点总结

    JS中的六种继承方式以及优缺点总结

    JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一,那么如何在JS中实现继承呢?下面这篇文章主要给大家介绍了关于JS中六种继承方式以及优缺点的相关资料,需要的朋友可以参考下
    2021-10-10
  • JavaScript截断字符串的方法

    JavaScript截断字符串的方法

    这篇文章主要介绍了JavaScript截断字符串的方法,涉及javascript字符串截取的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • javascript设计模式之中介者模式Mediator

    javascript设计模式之中介者模式Mediator

    这篇文章主要介绍了javascript设计模式之中介者模式Mediator,需要的朋友可以参考下
    2014-12-12
  • bootstrap table服务端实现分页效果

    bootstrap table服务端实现分页效果

    这篇文章主要为大家详细介绍了bootstrap table服务端实现分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • webpack 处理CSS资源的实现

    webpack 处理CSS资源的实现

    这篇文章主要介绍了webpack 处理CSS资源的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • javascript 常见的闭包问题的解决办法

    javascript 常见的闭包问题的解决办法

    javascript 常见的闭包问题的解决办法,需要的朋友可以参考下。
    2009-11-11
  • 微信小程序实现列表条件筛选

    微信小程序实现列表条件筛选

    这篇文章主要为大家详细介绍了微信小程序实现列表条件筛选，筛选框的效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • Javascript笔记一 js以及json基础使用说明

    Javascript笔记一 js以及json基础使用说明

    JavaScript中的数据很简洁的。简单数据只有 undefined, null, boolean, number和string这五种，而复杂数据只有一种，即object。
    2010-05-05
  • 更优雅的事件触发兼容

    更优雅的事件触发兼容

    对于JS框架开发中的客户端（浏览器）兼容难题，各位想必都不陌生。平常，我们都用if去面对接口不一致以及成堆的bug。然而，这里介绍的方法却可以让兼容更加优雅
    2011-10-10
  • 学习JavaScript设计模式之模板方法模式

    学习JavaScript设计模式之模板方法模式

    这篇文章主要为大家介绍了JavaScript设计模式中的模板方法模式，对JavaScript设计模式感兴趣的小伙伴们可以参考一下
    2016-01-01

最新评论