英特网校

CSS模拟苹果系统开关按钮效果

网页移动端开发时经常遇到开关按钮,而html表单没有相对于的按钮,这时我们就需要利用checkbox的功能来模拟开关按钮,具体实现方法和checkboxradio自定义的方法类似,具体可以结合网站中的优化checkboxradio方法对比学习。

这里介绍的是利用css对开关按钮实现的方法,当然大家也可以尝试用js的方法修改,利用纯css存在兼容问题,在IE9及以上才能正常显示,支持谷歌、火狐等主流浏览器。最终效果图如下:

未标题-1.jpg

实现原理:添加一个labelinput标签,然后在label标签里添加span/em标签(用于模仿开关的样式),默认然input标签隐藏,span/em做成开关样式(css样式控制),然后利用:loaelchecked伪类选择器控制按钮是否选中,选中需要切换下span的图片。

HTML代码:

开关按钮

<div>

     <input type="checkbox" id="blance" value="" >

     <label for="blance"><em></em></label>

</div>

<div>

     <input type="checkbox" id="blance1" value="" checked="" >

     <label for="blance1"><em></em></label>

</div>

CSS代码



.Switch input {

    display: none

}

.switchLable {

    width: 52px;

    background: #CCC;

    height: 28px;

    border-radius: 14px;

    float: right;

    margin: 8px 10px 0 0;

    box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;

}

.switchLable em {

    width: 26px;

    height: 26px;

    float: left;

    margin: 1px;

    border-radius: 13px;

    box-shadow: 2px 3px 8px rgba(0,0,0,.1);

    background: #FFF;

}

#blance:checked + label {

    background: #52d864;

}

#blance:checked + label em {

    float: right;

}

#blance:disabled + label {

    opacity: 0.5

}

这样就可以实现开关的效果!

使用注意事项,因为labelfor参数是绑定id的,所以需要对每个switch中的input都需要设置id属性,同时设置好id属性后再样式中也需要针对不同id设置他的:checked伪类选择器的样式【见css样式红色部分】

最后在对应开关中input需要动态修改value的值,切换开关时,当开关打开时设置value=1;关闭时value=0;这里需要用js/jq来设置;

JS/JQ代码 [为了简化代码这里用jq来实现 ]

$("#blance,#blance1").change(function () {

     if($(this).attr('checked')){

           $(this).val(1)

           $(".switchShow").show();

      }else{

           $(this).val(0);

           $(".switchShow").hide();

      }

  })

效果演示:www.intewl.com/demo/ui/index.html

代码下载:https://pan.baidu.com/s/1MQvGx8SfK5ceIm2dHUZc_g

 




评论中心

登录后可评论,请 登录 注册