【html5】滑动开关

【1】尝试无js制作。缺点：点击到字无法切换，一直点击圆圈，右侧会跑出去（没空去弄了……）

 效果图：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>滑动开关</title>
    <style type="text/css" media="screen">
       /*设置元素字体大小 */
       .switch{
        position: relative;
        line-height: 24px;
        color: #fff;
       }
       .switch .open,.switch .close{
            position: absolute;
            top: 0px;
            left: 8px;
            font-size: 12px;
            cursor: pointer;
       }
       .switch .close{
            left:28px; 
       }
        /*label标签模拟按钮  */
        .switch_btn {
            display: block;
            width: 48px;
            height: 24px;
            background: #a1a1a1;
            border-radius: 12px;
            cursor: pointer;
            position: relative;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
        }

        /*设置伪类,来实现模拟滑块滑动*/

        .switch_btn:after {
            content: '';
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 100%;
            background: #fff;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
            position: absolute;
            left: 2px;
            top: 2px;
            -webkit-transform:translateZ(0);    
            transform:translateZ(0);
            -webkit-transition: all .3s ease;  
            transition: all .3s ease;
            z-index: 2;
        }

        .switch_btn:active:after {
            width: 24px;
        }
        /*根据checkbox状态实现滑动*/
        .chk_move{
            height:10px;
            width:10px;
            display: none;
        }

        .chk_move:checked+label {
            background: #028ead;
        }

        .chk_move:checked+label:after {
            left: 26px;
        }

        .chk_move:checked+label:active:after {
            left: 30px;
        }

    </style>
</head>

<body>
    <div class="switch">
        <input type="checkbox" id="chk" name="switch_btn" class="chk_move">
        <label for="chk" class="switch_btn"></label>
        <span class="open">开</span>
        <span class="close">关</span>
    </div>
</body>

</html>
View Code

【2】有部分jquery代码。没发现啥缺点。

效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
    <style type="text/css">        

        .cw-switch{display:inline-block;width:48px;height:24px;line-height:22px;border-radius:24px;vertical-align:middle;border:1px solid #ccc;background-color:#ccc;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition:all .2s ease-in-out}
        .cw-switch-inner{color:#fff;font-size:12px;position:absolute;left:25px}
    
        .cw-switch:after{content:'';width:20px;height:20px;border-radius:20px;background-color:#fff;position:absolute;left:1px;top:1px;cursor:pointer;transition:left .2s ease-in-out,width .2s ease-in-out}
        .cw-switch:active:after{width:26px}
        .cw-switch-checked{border-color:#39f;background-color:#39f}
        .cw-switch-checked .cw-switch-inner{left:8px}
        .cw-switch-checked:after{left:25px}.cw-switch-checked:active:after{left:19px}
        .cw-switch-disabled{cursor:not-allowed;background:#f3f3f3;border-color:#f3f3f3}
        .cw-switch-disabled:after{background:#ccc;cursor:not-allowed}.cw-switch-disabled .cw-switch-inner{color:#ccc}
    </style>
</head>
<body>
    <div class="cw-switch cw-switch-checked">
        <div class="cw-switch-inner">
            <span id="word">开</span>
        </div>
    </div>

    <script type="text/javascript">
        $(function(){
            $(".cw-switch").click(function() {
                if($(this).hasClass('cw-switch-checked')){
                    $("#word").text('关')
                }else{
                    $("#word").text('开')
                }
                $(this).toggleClass('cw-switch-checked');
                
            });
        })
    </script>
</body>
</html>
View Code
posted on 2017-06-15 17:38  Nyah  阅读(1156)  评论(0)    收藏  举报