js手写开关控件

字数 0阅读 57
charge.png
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">  
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>开关插件2</title>
</head>
<style>
    .mycheckbox {
        display: none;
    }
    .switch {
        width: 50px;
        height: 31px;
        background: #D6739E;
        border-radius: 20px;
        padding: 1px;
        box-sizing: border-box;
        display: inline-block;
        margin-top: 15px;
    }
    .switch:after {
        content: '';
        box-shadow: 0 3px 8px 0 rgba(0,0,0,0.15), 0 1px 1px 0 rgba(0,0,0,0.16), 0 3px 1px 0 rgba(0,0,0,0.10);
        width: 28px;
        height: 28px;
        background: #fff;
        border-radius: 50%;
        display: block;
        margin-left: 1px;
        float: left;
        transition: all 0.5s;
    }
    .mycheckbox:checked+.switch:after {
        margin-left: 20px;
    }
    .mycheckbox:checked+.switch {
        background: #ccc;
    }
</style>
<body>
<input type="checkbox" id="mycheckbox" class="mycheckbox">
<label class="switch" for="mycheckbox"></label>
<script src="./js/jquery.min.js"></script>
<script>
$(function(){
    $("#mycheckbox").prop("checked", true);
    $("#mycheckbox").prop("checked");
})
</script>
</body>
</html>