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被点击时 宽度 颜色和透明度的细节设置。

源码下载

源代码可以点击链接下载

??

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