<!DOCTYPE html>

<html>

<head >

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">

    /*

    使用：

       1、html：修改input id和label for   onclick="test1()"

       2、css：修改#switch1:checked~label:before名字

               修改#switch1:checked~label名字

       3、js：函数名字

    改按钮大小

       1、改switch-container的宽高

       2、改label:before的宽为switch-container的宽

       3、改#switch:checked~label:before的left为switch-container的宽

    */

     /* 开关的大小*/

     .switch-container{

         height: 24px;

         width:48px;

     }

     /*设置checkbox不显示*/

     .switch{

         display: none;

     }

     /*设置label标签为椭圆状*/

     .switch-container label{

         display: block;

         background-color: #eee;

         height: 100%;

         width: 100%;

         cursor: pointer;

         border-radius: 25px;

         position: relative;

     }

     /*在label标签内容之前添加如下样式，形成一个未选中状态*/

    .switch-container label:before {

            content: '';

            display: block;

            border-radius: 25px;

            height: 100%;

            width: 24px;

            background-color: white;

            position: absolute;

            left: 0px;

            box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);

            -webkit-transition: all 0.5s ease;

            transition: all 0.5s ease;

        }

/*选中后，未选中样式消失*/

#switch:checked~label:before {

  left: 24px;

}

/*选中后label的背景色改变*/

#switch:checked~label {

    background-color: #4dbd74;

}

/*选中后，未选中样式消失*/

#switch1:checked~label:before {

  left: 24px;

}

/*选中后label的背景色改变*/

#switch1:checked~label {

    background-color: #4dbd74;

}

</style>

</head>

<body>

    <div class="switch-container ">

         <input  type="checkbox" id="switch" class="switch">

         <label for="switch"  onclick="test()"></label>

    </div>

    <div class="switch-box" style="width: 100px;">

        <div class="switch-container " style="float: left;">

             <input  type="checkbox" id="switch1" class="switch">

             <label for="switch1"  onclick="test1()"></label>

        </div>

        <div style="float: right;">

            <span id="switch1Con">选中</span>

        </div>

    </div>

     <script>

            var test = function(){

               console.log(!document.getElementById('switch').checked ? "选中" : "未选中");

            }

             var test1 = function(){

                 if (!document.getElementById('switch1').checked ) {

                     document.getElementById('switch1Con').innerHTML="开启";

                 }else{

                     document.getElementById('switch1Con').innerHTML="开启";

                 }

            }

     </script>

</body>

</html>

switch滑动开关的更多相关文章

  1. android widgets控件

    1.TextView 类似,C#里的lable,显示一段文本 <TextView android:id="@+id/textView2" android:layout_wid ...

  2. 【转】Android SwitchButton（滑动开关）

    原文网址:http://blog.csdn.net/wangjinyu501/article/details/27961303 版本:1.0 日期:2014.5.17 2014.6.1 版权:© 20 ...

  3. Android SwitchButton（滑动开关）

    @RemoteView public class Button extends TextView { public Button(Context context) { this(context, nu ...

  4. 自定义控件（视图）2期笔记05：自定义控件之继承自View（滑动开关）

    1.  开关按钮点击效果,如下: 2. 继承已有View实现自定义View 3. 下面通过一个案例实现滑动开关的案例: (1)新建一个新的Android工程,命名为" 开关按钮", ...

  5. SlipButton——滑动开关

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjI1MjUwMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...

  6. Android实现Material Design风格的设置页面（滑动开关控件）

    前言 本文链接 http://blog.csdn.net/never_cxb/article/details/50763271 转载请注明出处 參考了这篇文章 Material Design 风格的设 ...

  7. android自定义控件——以滑动开关为例

    0.引言 (1)Android从4.0开始提供了switch的滑动开关效果组件,但是之前版本却没有 (2)很多时候我们写程序,都希望把有用的通用的通用的东西封装起来,以便以后重用. 本文根据组件开发思 ...

  8. Partition：分区切换（Switch）

    在SQL Server中,对超级大表做数据归档,使用select和delete命令是十分耗费CPU时间和Disk空间的,SQL Server必须记录相应数量的事务日志,而使用switch操作归档分区表 ...

  9. java中if和switch哪个效率快

    首先要看一个问题,if 语句适用范围比较广,只要是 boolean 表达式都可以用 if 判断:而 switch 只能对基本类型进行数值比较.两者的可比性就仅限在两个基本类型比较的范围内.说到基本类型 ...

随机推荐

  1. VisualSVN Server的迁移

    VisualSVN Server迁移涉及到两种情况: 第一种情况:VisualSVN Server没有更换电脑或者服务器,只是修改Server name. 第二种情况:当VisualSVN Serve ...

  2. Spark SQL、DataFrame和Dataset——转载

    转载自:  Spark SQL.DataFrame和Datase

  3. 四则运算2+psp0

    程序要求: 1.题目避免重复 2.可定制(数量\打印方式) 3.可以一下控制参数 ① 是否有乘除法 ② 是否有括号(最多支持十个数参与运算) ③ 数值范围 ④加减有无负数 ⑤除法有无余数 分析:① 如 ...

  4. CSS3：不可思议的border属性

    在CSS中,其border属性有很多的规则.对于一些事物,例如三角形或者其它的图像,我们仍然使用图片代替.但是现在就不需要了,我们可以用CSS形成一些基本图形,我分享了一些关于这方面的技巧. 1.正三 ...

  5. HDU 5286 How far away ？ lca

    题目链接: 题目 How far away ? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...

  6. springboot+vue+element：echarts开发遇见问题---vue前端(二)

    <template> <u-grid> <u-grid-item caption="服务使用统计排行"> <div class=" ...

  7. 多tab点击切换

    现在来一个小练习,就是用js实现多tab之间的切换: <body> <ul id="tab"> <li id="tab1"> ...

  8. 团队项目-BUG挖掘

    测试硬件: 华为畅享5 测试平台: 安卓5.1 测试项目Git地址: https://github.com/RABITBABY/We-have-bing 测试Apk来源地址: http://www.a ...

  9. php面试必知必会常见问题

    1 说出常用的10个数组方法 我觉得数组比较最能体现PHP基础语法的一个数据结构了,下面给大家列一下常用的10个关于操作数组的函数 in_array(判断数组中是否有某个元素) implode(将数组 ...

  10. Delphi中的DBGrid控件

    在Delphi中,DBGrid控件是一个开发数据库软件不能不使用的控件,其功能非常强大,可以配合SQL语句实现几乎所有数据报表的显示,操作也非常简单,属性.过程.事件等都非常直观,但是使用中,有时侯还 ...