本片文章将简单的采用input[type=checkbox]跟css3来实现switch开关的效果,效果图如下：
html代码：
<div class="bg_con">
<input id="checkSwitch" type="checkbox" checked="true" class="switch" />
<label for="checkSwitch"></label>
</div>
label标签for属性的作用：将for属性值与input 中id值相等的标签关联起来，当点击label标签时，如radio，checkbox会随之选中或者不选中
<label for="fruits">水果</label><input type="checkbox" id="fruits"/>
<label for="vegetables">蔬菜</label><input type="checkbox" id="vegetables"/>
css代码:
.switch{
display:none;
}
.bg_con{
width: 80px;
border: 1p solid #000;
}
label{
position: relative;
display: block;
border-radius: 20px;
height: 30px;
background: #eee;
cursor: pointer;
-webkit-user-select: none;
}
label:before{
content: ‘‘;
display: block;
border-radius: 20px;
height: 30px;
background: #fff;
border: 1px solid #eee;
-webkit-transition: all 1s ease;
}
label:after{
content: ‘‘;
display: block;
position: absolute;
top: 1px;
left: 1px;
width: 30px;
height: 30px;
border-radius: 30px;
background: #999;
-webkit-transform: translateX(0px);
transition:all 0.3s ease;
}
.switch:checked~label:after{
-webkit-transform: translateX(50px);
}
.switch:checked~label:before{
background: green;
}
transform（变形，转换）http://www.w3school.com.cn/cssref/pr_transform.asp
transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，translateX和translateY以此类推。
transition（过渡）http://www.w3school.com.cn/css3/css3_transition.asp
transition的属性值包括：transition-property(过渡属性名 all 必填),transition-duration(过渡周期时间 0.3s 必填),transition-timing-function(过渡方式 ease 必填),transition-delay(延迟时间 选填)
.switch:checked~label:before (class为switch的标签选中时当前标签后面的lable标签的伪元素before)
.switch:checked~label:after(class为switch的标签选中时当前标签后面的lable标签的伪元素after)
http://www.w3school.com.cn/cssref/selector_gen_sibling.asp
<script>
//使用onchange事件，监听当前是开(checked = true)还是关(checked = false)
var checkSwitch= document.getElementById(‘checkSwitch‘);
checkSwitch.onchange=function(event){
console.log(event.target.checked);
}
</script>