<!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. Android 对话框(Dialogs)

    对话框是提示用户作出决定或输入额外信息的小窗口. 对话框不会填充屏幕,通常用于需要用户采取行动才能继续执行的模式事件. 1.对话框设计 如需了解有关如何设计对话框的信息(包括语言建议),请阅读对话框设 ...

  2. 补充的css知识点

    1.文字一行显示   超出的用...表示 .ellipsis{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  3. 查看struts包源码

  4. 团队Alpha冲刺（五）

    目录 组员情况 组员1(组长):胡绪佩 组员2:胡青元 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示 ...

  5. Codeforces Round #345 (Div. 1) C. Table Compression dp+并查集

    题目链接: http://codeforces.com/problemset/problem/650/C C. Table Compression time limit per test4 secon ...

  6. lintcode-384-最长无重复字符的子串

    384-最长无重复字符的子串 给定一个字符串,请找出其中无重复字符的最长子字符串. 样例 例如,在"abcabcbb"中,其无重复字符的最长子字符串是"abc" ...

  7. lintcode-221-链表求和 II

    221-链表求和 II 假定用一个链表表示两个数,其中每个节点仅包含一个数字.假设这两个数的数字顺序排列,请设计一种方法将两个数相加,并将其结果表现为链表的形式. 样例 给出 6->1-> ...

  8. bond下改变网卡

    浪潮服务器打开控制台 用ip addr查看哪个网卡是绑定的,eth2和eth4是绑定状态 用mv命令,更改网卡名称 并将每个网卡里的信息更改 reboot,重启 ip addr查看,eth6和eth8 ...

  9. (转)设置Sysctl.conf用以提高Linux的性能(最完整的sysctl.conf优化方案)

    Sysctl是一个允许您改变正在运行中的Linux系统的接口.它包含一些 TCP/IP 堆栈和虚拟内存系统的高级选项, 这可以让有经验的管理员提高引人注目的系统性能.用sysctl可以读取设置超过五百 ...

  10. Spring-MVC理解之二：前置控制器

    原文链接:http://www.cnblogs.com/brolanda/p/4265749.html 一.前置控制器配置与讲解 上篇中理解了IOC容器的初始化时机,并理解了webApplicatio ...