使用css3 制作switch开关

标签：absolute   实现   delay   its   doc   htm   logs   点击   ons   

 本片文章将简单的采用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>

使用css3 制作switch开关

标签：absolute   实现   delay   its   doc   htm   logs   点击   ons   

原文地址：http://www.cnblogs.com/leijee/p/7027056.html