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个部分组成
- 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的内容有些多我会一个一个讲解我当时的思路
*{
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被点击时 宽度 颜色和透明度的细节设置。
源码下载
源代码可以点击链接下载
😄
至此基本讲解完毕,人生的意义也许就是留下些什么吧 那就创造吧 😀。
网友评论