使用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開關