<!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. centos 7.2 安装apache,mysql,php5.6

    安装Apache.PHP.Mysql.连接Mysql数据库的包: yum -y install httpd yum -y install php yum -y install php-fpm yum  ...

  2. Java 学习笔记 ------第二章 从JDK到IDE

    本章学习目标: 了解与设定PATH 了解与指定CLASSPATH 了解与指定SOURCEPATH 使用package与import管理类别 初步认识JDK与IDE的对应关系 一.第一个Java程序 工 ...

  3. OOP 1.5 类和对象的基本概念与用法1

    1.定义 面向对象的基本特点:抽象.封装.继承.多态 面向对象程序设计方法:将某类客观事物的共同特点归纳出来,形成一个数据结构 抽象:将事物所能进行的行为归纳出来,形成一个个函数,这些函数可以用来操作 ...

  4. HDU 5391Z ball in Tina Town 数论

    题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5391 bc:  http://bestcoder.hdu.edu.cn/contests/c ...

  5. 关《我是IT小小鸟》有感

    我一直认为大学就是一个自由的舒适的学习环境,没有人可以干扰你限制你,以至于我到了大学之后只剩下了颓废的生活.每天上课玩手机,下课玩电脑,吃饭叫外卖,从不去锻炼,周末就熬夜通宵,状态越来越差,导致我逐渐 ...

  6. 使用windows live writer发表的博客

    试插入代码 #include <iostream.h> using namespace std; int main() { cout<<"hello world&qu ...

  7. 在服务器中使用 Entity Framework 的 Migration 更新数据库

    在开发环境中,每次我们对要对数据库进行更改,比如增加修改表字段等.改好Entity类后,我们只需在Nuget程序包管理控制台运行 update-database 脚本却可: update-databa ...

  8. PAT 甲级 1144 The Missing Number

    https://pintia.cn/problem-sets/994805342720868352/problems/994805343463260160 Given N integers, you ...

  9. 守护线程以及要使用时注意的一点(Daemon Thread)

    在Java中有两类线程:User Thread(用户线程).Daemon Thread(守护线程) Daemon的作用是为其他线程的运行提供便利服务,比如垃圾回收线程就是一个很称职的守护者.User和 ...

  10. 我们为什么要使用Spring Cloud？

    我们为什么要使用Spring Cloud? 两个需要好好看看: Spring Boot Spring Clude Spring Cloud是一个集成了众多开源的框架,利用Spring Boot的开发便 ...