<!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. SQL行列轉換方法(詳細例子)

    普通行列转换(version 1.0)仅针对sql server 2000提供静态和动态写法,version 2.0增加sql server 2005的有关写法. 问题:假设有张学生成绩表(tb)如下 ...

  2. Beta发布——美工+文案

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2408项目地址:https://coding.net/u/wuyy694/ ...

  3. iOS开发 常见错误

    一.NSAppTransportSecurity 错误提示:NSURLSession/NSURLConnection HTTP load failed (kCFStreamErrorDomainSSL ...

  4. 在windows和unbuntu上安装octave

    windows安装octave 安装wiki Octave ftp库 从上述的库中可以找到对应的版本的octave的exe安装程序,或者是zip等的压缩包,建议直接下载对应系统的exe执行文件.安装. ...

  5. nginx　二进制安装

    Nginx的安装方法 1:yum安装 默认是1.6版本,且在epel源中   2:源码包编译安装 源码下载:http://nginx.org/en/download.html,下载1.8稳定版本   ...

  6. Maven的setting配置文件

    一.Maven的setting配置文件 和 在Eclipse中对Maven的正确配置. 1.Maven的配置文件(Maven的安装目录/conf/settings.xml ) 和 Maven仓库下(默 ...

  7. mysql 慢查询，查询缓存，索引，备份，水平分割

    1.开启慢查询 在mysql的配置文件my.ini最后增加如下命令 [mysqld]port=3306slow_query_log =1long_query_time = 1 2.查看慢查询记录 默认 ...

  8. linux学习笔记4

    查看当前系统还有哪些用户 who 字符计数 wc -l(line) 可以统计有多少行 -w(word) 可以统计有多少个单词 -c(character) 可以统计有多少个字符  切个字符 - 排序 l ...

  9. .net MVC中使用angularJs刷新页面数据列表

    使用angularjs的双向绑定功能,定时刷新页面上数据列表(不是刷新网页,通过ajax请求只刷新数据列表部分页面),实例如下: @{ Layout = null; } <!DOCTYPE ht ...

  10. 【.Net】C# 将Access中时间段条件查询的数据添加到ListView中

    一.让ListView控件显示表头的方法 在窗体中添加ListView 空间,其属性中设置:View属性设置为:Detail,Columns集合中添加表头中的文字. 二.利用代码给ListView添加 ...