纯CSS模仿微信的Switch按钮+微信公众号PHP前后端完整代码

先上效果图

其实很简单，就是应用了CSS里transition这个属性，当选择框为checked的时候给一个坐标，默认的时候为另一个，就会有动画效果，input框已经隐藏了，用label标签去写样式，直接上代码吧

（之所以switch一开始要display：none隐藏，是因为，刚开始总有一个默认值，当初始化的时候，如果数据库的值与默认的不一样，加载页的时候会自动显示一个动画，不太舒服。于是就先隐藏，等获取到数据再显示）

CSS:代码

.switch {
    position: relative;
    float: left;
    width: 80px;
    margin: 0;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select: none;
    top:8px;
    left: 50px;
}
.switch-checkbox {
    display: none;
}
.switch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 20px;
    margin: 0;
}
.switch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}
.switch-inner::before, .switch-inner::after {
    display: block;
    float: right;
    width: 50%;
    height: 36px;
    padding: 0;
    line-height: 36px;
    font-size: 14px;
    color: white;
    font-family:Trebuchet, Arial, sans-serif;
    font-weight: bold;
    box-sizing: border-box;
}
.switch-inner::after {
    content: attr(data-on);
    padding-left: 10px;
    background-color: #4bd863;
    color: #FFFFFF;
}
.switch-inner::before {
    content: attr(data-off);
    padding-right: 10px;
    border-radius: 20px;
    border: 2px solid #eee;
    color: #999999;
    text-align: right;
}
.switch-switch {
    position: absolute;
    display: block;
    width: 34px;
    height: 34px;
    margin: 4px;
    background: #FFFFFF;
    top: -3px;
    bottom: 0;
    right: 40px;
    box-shadow: -1px 2px 4px #888888;
    border-radius: 20px;
    transition: all 0.3s ease-in 0s;
}
.switch-checkbox:checked + .switch-label .switch-inner {
    margin-left: 0;
}
.switch-checkbox:checked + .switch-label .switch-switch {
    right: -2px;
}

HTML代码

<div class="switch" id="switch" style="display: none;">
    <input class="switch-checkbox" id="onoffswitch" type="checkbox" checked="checked">
    <label class="switch-label" for="onoffswitch">
        <span class="switch-inner" data-on="ON" data-off="OFF"></span>
        <span class="switch-switch"></span>
    </label>
</div>

JS代码

$(document).ready(function() {
    var flag;
    initstate();
    // 初始化开关
    function initstate() {
        $.ajax({
            url:'pushCheck',
            type: 'post',
            beforeSend: function () {
                $("#loading").show();
            },
            success: function (data) {
                if(data.state==null||data.state==""||data.state==0){
                    flag=0;
                    $("#onoffswitch").prop("checked", true);
                    $("#testswitch").css("display", 'block');
                }else{
                    flag=1;
                    $("#onoffswitch").prop("checked", false);
                    $("#testswitch").css("display", 'block');
                }
            },complete: function () {
                $("#loading").hide();
            },error:function($data){
                return false;
            }
        });
    }
    // 改变开关状态
    $("#onoffswitch").on('click', function(){
        clickSwitch();
        console.log("改变开关状态");
    });
    function changePush() {
        console.log("send");
        $.ajax({
            url:'pushChange',
            type: 'post',
            data: {state:flag},
            beforeSend: function () {
                $("#loading").show();
            },
            success: function (data) {
                console.log(data);
                if(data.message=="fail"){
                    initstate();
                }
            },complete: function () {
                $("#loading").hide();
            },error:function($data){
                return false;
            }
        });
    }
    // 记录开关状态的改变
    var clickSwitch = function() {
        if ($("#onoffswitch").is(':checked')) {
            flag=0;
        } else {
            flag=1
        }
        changePush();
    };
});

 

PHP代码

    /**
     * 消息推送开关初始化
     * Neil
     */
    public function pushCheck(){
        if(request()->isAjax()){
            $openid = $this->getOpenId();
            $getUser = $this->findByOpenid($openid);
            try{
                return ["state"=>$getUser['allow_note']];
            }catch (\Exception $e){
                //未知错误
                echo $e->getMessage();
                exit;
                $this->redirect("teacher/index?appid=$appid");
            }
        }
    }
    /**
     * 消息推送狀態切換
     * Neil
     */
    public function pushChange(){
        if(request()->isAjax()){
            $data = request()->post();
            $openid = $this->getOpenId();
            $getUser = $this->findByOpenid($openid);
            if ($getUser){
                try{
                    $flag_check = db('we_fans')->where(['uid' =>$getUser['uid'] ])->find();
                    if ($flag_check) {
                        db('we_fans')->where(['id' => $flag_check['id']])->update([
                            'allow_note'=>$data['state']
                        ]);
                        return ['message',"ok"];
                    }else{
                        return ['message',"fail"];
                    }
                }catch (\Exception $e){
                    //未知错误
                    echo $e->getMessage();
                    exit;
                    $this->redirect("teacher/index?appid=$appid");
                }
            }

        }
    }