交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 原生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>

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。


    广而告之:
    热门推荐:
    Vue使用vue-area-linkage实现地址三级联动效果的示例

    很多时候我们需要使用地址三级联动,即省市区三级联动。网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果: 1.安装vue-area-linkage插件:npm install --save vue-area-linkage --registry=https://registry.npm.t···

    js将当前时间格式化为 年-月-日 时:分:秒的实现代码

    利用js的Date()对象,将系统当前时间格式化为年-月-日 时:分:秒。也可以自己定义格式。(做项目时遇到这个问题。本来想百度一个用,哎,网上的结果太乱了,于是自己写一个) 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8···

    JavaScript中数组添加值和访问值常见问题

    通过本文给大家介绍关于数组方面的一些小问题,或许对大家有点帮助,本文写的不好,还请各位大侠见谅。 1. // var arr = [,,]; // arr["bbb"]="nor "; // arr[-]="nor "; // console.log(arr); >> [, , , bbb: "nor ", -: "nor "] // console.log(arr.bbb) >> "no···

    如何把php5.3版本升级到php5.4或者php5.5

    今天我们这篇php的技术文章主要为各位朋友们介绍如何使用yum进行安装php的5.4或者5.5版本。当然我们使用centos6.5作为我们的测试机器。其实非常简单,只要下面的两个命令就可以轻松的进行安装php的5.4版本了。 复制代码 代码如下: yum remove php php-bcmath php-cli php-commo···

    我的javascript 函数链之演变

    最易读版 复制代码 代码如下: function chain(obj){ function fun(){ if (arguments.length == 0){ return fun.obj; } var methodName = arguments[0], methodArgs = [].slice.call(arguments,1); fun.obj[methodName].apply(fun.obj,methodArgs); return fun; } fun.obj···

    JavaScript+Regex 身份证号码的正则表达式及验证详解

    简言 在做用户实名验证时,常会用到身份证号码的正则表达式及校验方案。本文列举了两种验证方案,大家可以根据自己的项目实际情况,选择适合的方案。 身份证号码说明 居民身份证号码,正确、正式的称谓应该是“公民身份号码”。根据【中华人民共和国国家标准 GB 11643-1999】中···

    html5在移动端的屏幕适应问题示例探讨

    Html5 曾经是最最炙手可热的技术,移动端也因为html5技术的加入变得更加变通一些,人人都喜欢“Write once,run more”,但在今年扎克伯格承认在html5上的失策以来,我们也应该清醒的认识到html5作为一种新兴技术,还有许多不完善的地方,比如html5 的效率问题,这足···

    详解vue与后端数据交互(ajax):vue-resource

    本人对vue与后端数据交互不是很懂,搜索了很多关于vue与后端数据交互介绍,下面我来记录一下,有需要了解的朋友可参考。希望此文章对各位有所帮助。 必须引入一个库:vue-resource 1.获取普通文本数据 比如:a.txt: welcomet to vue!!! <!DOCTYPE html> <html> <···

    Easyui使用Dialog行内按钮布局的实例

    JSP页面 <div class="easyui-layout" data-options="fit:true"> <div data-options="region:'north',split:false" > <div title="角色分配" > <table cellpadding="12" cellspacing="0" > <tr> <td >···

    jQuery日期范围选择器附源码下载

    jQuery Date Range Picker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件。整个日期选择器插件使用CSS来渲染样式,可以非常容易的使用CSS来定制皮肤。而且浏览器兼容性非常好,支持多种时间格式。 查看演示         ···