zoukankan      html  css  js  c++  java
  • 滑动条使用

    需要完成五个步骤:

    • 去除系统默认的样式;
    • 给滑动轨道(track)添加样式;
    • 给滑块(thumb)添加样式;
    • 根据滑块所在位置填充进度条;
    • 实现多浏览器兼容。

    执行代码:

    <!DOCTYPE html>
    <html>
        <head>
        <title>demo</title>
        <script type="text/javascript" src="lib/jquery.js"></script>
        <script type="text/javascript">
            $.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 + '%, white)' );
                    if ($.isFunction(callback)) {
                        callback(this);
                    }
                });
            };
        </script>
        <style type="text/css">
            input[type=range] {
                -webkit-appearance: none;
                 300px;
                border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
                background: -webkit-linear-gradient(#059CFA, #059CFA) no-repeat;
                background-size: 0% 100%;
            }
            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;
                 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; /*添加底部阴影*/
            }
            input[type=range]::-moz-range-progress {
                background: linear-gradient(to right, #059CFA, white 100%, white);
                height: 13px;    
                border-radius: 10px;
            }
            input[type=range] {
                -webkit-appearance: none;
                 300px;
                border-radius: 10px;
            }
            input[type=range]::-ms-track {
                height: 25px;
                border-radius: 10px;
                box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
                border-color: transparent; /*去除原有边框*/
                color: transparent; /*去除轨道内的竖线*/
            }
            input[type=range]::-ms-thumb {
                border: solid 0.125em rgba(205, 224, 230, 0.5);
                height: 25px;
                 25px;
                border-radius: 50%;
                background: #ffffff;
                margin-top: -5px;
                box-shadow: 0 .125em .125em #3b4547;
            }
            input[type=range]::-ms-fill-lower {
                /*进度条已填充的部分*/
                height: 22px;
                border-radius: 10px;
                background: linear-gradient(to right, #059CFA, white 100%, white);
            }
            input[type=range]::-ms-fill-upper {
                /*进度条未填充的部分*/
                height: 22px;
                border-radius: 10px;
                background: #ffffff;
            }
            input[type=range]:focus::-ms-fill-lower {
                background: linear-gradient(to right, #059CFA, white 100%, white);
                background: linear-gradient(#059CFA, #059CFA) no-repeat;
            }
            input[type=range]:focus::-ms-fill-upper {
                background: #ffffff;
                background: linear-gradient(#059CFA, #059CFA) no-repeat;
            }
        </style>
        </head>
        <body>
            <div id="test">
                <input type="range" value="0">
            </div>
            <script>
                var change = function($input) {
                    /*内容可自行定义*/
                    console.log("123");
                }
                $('input').RangeSlider({ min: 0,   max: 100,  step: 0.1,  callback: change});
            </script>
        </body>
    </html>
    

      input[type=”range”]

  • 相关阅读:
    用原生JS写根据时间显示问候语
    用原生JS写洗扑克牌
    rabbitmq系列——(0 导航)
    rabbitmq系列——(0 Windows下安装)
    rabbitmq系列——(1生产者消费者点对点)
    rabbitmq系列——(2 多生产多消费)
    rabbitmq系列——(3 优先级 )
    rabbitmq系列——(4 Exchange Type -- Direct)
    rabbitmq系列——(4 Exchange Type -- Fanout)
    rabbitmq系列——(4 Exchange Type -- Topic)
  • 原文地址:https://www.cnblogs.com/2734156755z/p/9269824.html
Copyright © 2011-2022 走看看