什么都分享
以及,记录自己的故事
正在载入当前位置天气信息……

仿IOS滑动按钮-CSS按钮设计代码下载(自设计6)

范例

使用CSS构图并控制动画效果,使用JavaScript控制点击事件和变色。


代码区

css

<style type="text/css">
.ex_box {
display:none;
}
.ex_div{
width:50px;
height:25px;
border-radius:25px;
background-color:#ffffff;
border:1px solid #E8E8E8;
position:relative;
transition:0.4s;
-webkit-transition:0.4s;
-moz-transition:0.4s;
-o-transition:0.4s;
}
.ex_div label{
transition:0.4s;
-webkit-transition:0.4s;
-moz-transition:0.4s;
-o-transition:0.4s;
cursor:pointer;
display:block;
background-color:#FFFFFF;
width:22px;
height:23px;
border-radius:50%;
border:1px solid #E8E8E8;
position:absolute;
top:0px;
left:0px;
}
.ex_div input[type="checkbox"]:checked + label{
transition:0.4s;
-webkit-transition:0.4s;
-moz-transition:0.4s;
-o-transition:0.4s;
left:26px;
}
</style>

html

<div class="ex_div" id="ex_div_id"><input class="ex_box" type="checkbox" id="ex_box" onclick="function()"/><label class="ex_label" for="ex_box" id="ex_label"></label></div>

JavaScript

<script type="text/javascript">
window.onload=function(){
  document.getElementById('ex_box').onclick=function(){
    if (document.getElementById('ex_box').checked){
    var color = '#54E297';
    document.getElementById('ex_div_id').style.backgroundColor = color;
    document.getElementById('ex_label').style.borderColor = color;
  }else{
    var color = '#FFF';
    document.getElementById('ex_div_id').style.backgroundColor = color;
    document.getElementById('ex_label').style.borderColor = '#E8E8E8';
    }
  }
}
</script>

打赏
本文遵守创作共享 BY-NC-ND 4.0协议,转载前请先联系作者。绯末博客 » 仿IOS滑动按钮-CSS按钮设计代码下载(自设计6)
分享到: 更多 (0)

评论 抢沙发

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏