CheckBox
效果圖
html結(jié)構(gòu)
<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個(gè)部分組成
- checkbox 外框
- checkbox主體
- on塊
- 灰色的分割線
- 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的內(nèi)容有些多我會(huì)一個(gè)一個(gè)講解我當(dāng)時(shí)的思路
*{
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;
}
這一部分主要時(shí)全局消除padding 和 margin 避免計(jì)算大小的麻煩 并設(shè)置一下超出顯示區(qū)域時(shí)的反饋為隱藏；
后面設(shè)置html和body的高度為100%因?yàn)閔tml默認(rèn) 寬度100%時(shí) 是占據(jù)整個(gè)屏寬的 高度是父容器的大小，而頂級(jí)的html或者body沒有設(shè)置為100%的話，那高度一般都是有容器內(nèi)的元素大小決定的，所以這邊設(shè)置為100%是為了配合 demo 的樣式 width: 100%; height: 100%; display: flex;justify-content: center;align-items: center;讓我們演示的 組件能夠居中的顯示在屏幕中間，demo-container樣式有沒有都一樣這邊習(xí)慣塊級(jí)元素所以又加了一層 并設(shè)置 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設(shè)置了外邊框的圓角 wch-checkbox設(shè)置內(nèi)部布局方式為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;
}
這部分分別設(shè)置了on 分割線 和 off 以及 on和off內(nèi)的文字樣式 這邊需要注意的時(shí)為了點(diǎn)擊時(shí)顏色的變化需要在on和 off這兩個(gè)div設(shè)置 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 主要綁定的是點(diǎn)擊on或者off時(shí)設(shè)置 checkbox的 checked 屬性為true或者false 還有就是on和 off被點(diǎn)擊時(shí) 寬度 顏色和透明度的細(xì)節(jié)設(shè)置。
源碼下載
源代碼可以點(diǎn)擊鏈接下載
??
至此基本講解完畢，人生的意義也許就是留下些什么吧 那就創(chuàng)造吧 ??。
