zoukankan      html  css  js  c++  java
  • css+js调整当前界面背景音量

    展示效果

    html代码:

        <div>
            <audio id="audio" controls  src="https://dbl.5518pay.com/res/raw-assets/resources/audio/common/btnClick.7e5e8.mp3">
                <audio id="xqt" src="https://dbl.5518pay.com/res/raw-assets/resources/audio/common/btnClick.7e5e8.mp3"></audio>
            </audio>
            <div id="test">
                <input type="range" value="1">
            </div>
        </div>

    滑动条css样式

    input[type=range] {
      -webkit-appearance: none;
      width: 300px;
      border-radius: 10px;
      /*这个属性设置使填充进度条时的图形为圆角*/
    }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
    }
    input[type=range]::-webkit-slider-runnable-track {
      height: 15px;
      border-radius: 10px;
      /*将轨道设为圆角的*/
      box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
      /*轨道内置阴影效果*/
    }
    input[type=range]:focus {
      outline: none;
    }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      height: 25px;
      width: 25px;
      margin-top: -5px;
      /*使滑块超出轨道部分的偏移量相等*/
      background: #ffffff;
      border-radius: 50%;
      /*外观设置为圆形*/
      border: solid 0.125em rgba(205, 224, 230, 0.5);
      /*设置边框*/
      box-shadow: 0 .125em .125em #3b4547;
      /*添加底部阴影*/
    }

    滑动条js效果

        // 滑动条修饰
        $.fn.RangeSlider = function(cfg){
        this.sliderCfg = {
            min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
            max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
            step: cfg && Number(cfg.step) ? cfg.step : 1,
            callback: cfg && cfg.callback ? cfg.callback : null
        };
    
        var $input = $(this);
        var min = this.sliderCfg.min;
        var max = this.sliderCfg.max;
        var step = this.sliderCfg.step;
        var callback = this.sliderCfg.callback;
    
        $input.attr('min', min)
            .attr('max', max)
            .attr('step', step);
    
        $input.bind("input", function(e){
            $input.attr('value', this.value);
            $input.css( 'background', 'linear-gradient(to right, #059CFA, white ' + this.value*100 + '%, white)' );
    
            if ($.isFunction(callback)) {
                callback(this);
            }
        });
    };

    音频滑动播放声音js

        $(function(){
            /* 触发修改声音 */
            let vol = $('#audio')[0].volume;
            $('#audio').on('canplay',function(){
                this.play()
            });
            var timeout = null;
            var change = function($input) {
                    timeout!=null?clearTimeout(timeout):'';
                    timeout = setTimeout(function(){
                        dosomething()
                    },500)
                    /*内容可自行定义*/
                    console.log($($input).val());
                    $('#audio')[0].volume = $($input).val();
                }
            $('#test input').css( 'background', 'linear-gradient(to right, #059CFA, white ' + 100 + '%, white)' );
            $('input').RangeSlider({ min: 0,   max: 1,  step: 0.01,  callback: change});
            /* 防止声音播放连续触发 */
            function dosomething(){
                var player = document.getElementById('xqt');
                player.play();
            }
        })
  • 相关阅读:
    一行代码搞定Dubbo接口调用
    测试周期内测试进度报告规范
    jq 一个强悍的json格式化查看工具
    浅析Docker容器的应用场景
    HDU 4432 Sum of divisors (水题,进制转换)
    HDU 4431 Mahjong (DFS,暴力枚举,剪枝)
    CodeForces 589B Layer Cake (暴力)
    CodeForces 589J Cleaner Robot (DFS,或BFS)
    CodeForces 589I Lottery (暴力,水题)
    CodeForces 589D Boulevard (数学,相遇)
  • 原文地址:https://www.cnblogs.com/NB-JDzhou/p/10318454.html
Copyright © 2011-2022 走看看