CheckBox

效果图

每日美图

html结构

            <div class="wch-checkbox-outline">
                <div class="wch-checkbox">
                    <div class="on">    
                        <span>ON</span>
                    </div>
                    <div class="separator-line">
                    </div>
                    <div class="off">   
                        <span>OFF</span>
                    </div>
                </div>
           </div>

主体由5个部分组成

1. checkbox 外框
2. checkbox主体
3. on块
4. 灰色的分割线
5. off块

CSS

*{

    padding: 0;
    margin: 0;
    overflow: hidden;
}


html,body{
    height: 100%;
    font-size: 20px;
}

.demo{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

.demo-container{
    
    display: block;

}


.wch-checkbox-outline{
    width:9rem;
    height: 3rem;
    border-radius: 4px;
    display: block;
    background-color: #f1eac7;
    box-sizing: border-box;
}

.wch-checkbox-outline .wch-checkbox{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
}




.wch-checkbox-outline .wch-checkbox .on{
    width:  80%;
    height: 100%;
    box-sizing: border-box;
    background-color:           #ffd8c3;
    display: flex;
    justify-content: center;
    align-items: center;
    transition:all 1s  ease 0.2s;
}


.wch-checkbox-outline .wch-checkbox .separator-line{
    width: 2%;
    height: 100%;
    box-sizing: border-box;
    background-color: #778899;
    display: flex;
    opacity:0.8;
    transform:rotate(0deg);

}


.wch-checkbox-outline .wch-checkbox .off{
    width: 18%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:       #eaf3c9;
    transition:all  1s  ease 0.2s;
    opacity:0.3;
}


.wch-checkbox-outline .wch-checkbox .on span{
    
    width: 50%;
    color:  #fdb5b9;
    font: 1rem Arial,Verdana,"宋体";
    overflow: hidden;
    text-align: center;

}

.wch-checkbox-outline .wch-checkbox .off span{
    width: 50%;
    color: #bbbbee;
    font: 1rem Arial,Verdana,"宋体";
    overflow: hidden;
    text-align: center;
}

css的内容有些多我会一个一个讲解我当时的思路

*{

    padding: 0;
    margin: 0;
    overflow: hidden;
}


html,body{
    height: 100%;
    font-size: 20px;
}

.demo{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

.demo-container{
    
    display: block;

}

这一部分主要时全局消除padding 和 margin 避免计算大小的麻烦 并设置一下超出显示区域时的反馈为隐藏；
后面设置html和body的高度为100%因为html默认 宽度100%时 是占据整个屏宽的 高度是父容器的大小，而顶级的html或者body没有设置为100%的话，那高度一般都是有容器内的元素大小决定的，所以这边设置为100%是为了配合 demo 的样式 width: 100%; height: 100%; display: flex;justify-content: center;align-items: center;让我们演示的 组件能够居中的显示在屏幕中间，demo-container样式有没有都一样这边习惯块级元素所以又加了一层 并设置 css display:block;。

.wch-checkbox-outline{
    width:9rem;
    height: 3rem;
    border-radius: 4px;
    display: block;
    background-color: #f1eac7;
    box-sizing: border-box;
}

.wch-checkbox-outline .wch-checkbox{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
}

wch-checkbox-outline设置了外边框的圆角 wch-checkbox设置内部布局方式为flex

.wch-checkbox-outline .wch-checkbox .on{
    width:  80%;
    height: 100%;
    box-sizing: border-box;
    background-color:   #ffd8c3;
    display: flex;
    justify-content: center;
    align-items: center;
    transition:all 1s  ease 0.2s;
}


.wch-checkbox-outline .wch-checkbox .separator-line{
    width: 2%;
    height: 100%;
    box-sizing: border-box;
    background-color: #778899;
    display: flex;
    opacity:0.8;
    transform:rotate(0deg);

}


.wch-checkbox-outline .wch-checkbox .off{
    width: 18%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:       #eaf3c9;
    transition:all  1s  ease 0.2s;
    opacity:0.3;
}


.wch-checkbox-outline .wch-checkbox .on span{
    
    width: 50%;
    color:  #fdb5b9;
    font: 1rem Arial,Verdana,"宋体";
    overflow: hidden;
    text-align: center;

}

.wch-checkbox-outline .wch-checkbox .off span{
    width: 50%;
    color: #bbbbee;
    font: 1rem Arial,Verdana,"宋体";
    overflow: hidden;
    text-align: center;
}

这部分分别设置了on 分割线 和 off 以及 on和off内的文字样式 这边需要注意的时为了点击时颜色的变化需要在on和 off这两个div设置 transition:all 1s ease 0.2s;

Js文件

$(".wch-checkbox .on").on("click",function(){

        $(this).css("width" ,"80%" );
        $(this).css("opacity" ,"1" );
        $(".wch-checkbox .off").css("width" ,"18%" );
        $(".wch-checkbox .off").css("opacity" ,"0.3" );
        $(".wch-checkbox").data("checked",true);

})

$(".wch-checkbox .off").on("click",function(){

        $(this).css("width" ,"80%" );
        $(this).css("opacity" ,"1" );
        $(".wch-checkbox .on").css("width" ,"18%" );
        $(".wch-checkbox .on").css("opacity" ,"0.3" );
        $(".wch-checkbox").data("checked",false);

})

组件以来jquery-3.4.1 主要绑定的是点击on或者off时设置 checkbox的 checked 属性为true或者false 还有就是on和 off被点击时 宽度 颜色和透明度的细节设置。

源码下载

源代码可以点击链接下载

😄

至此基本讲解完毕，人生的意义也许就是留下些什么吧 那就创造吧 😀。