<!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. Facebook190亿美元收购WhatsApp

    Facebook收购WhatsApp,前后只花费10天时间.这是Facebook迄今规模最大的一笔收购,可能也是史上最昂贵的一笔针对靠私人风投起家的企业的收购案. 2月9日,马克•扎克伯格(Mark ...

  2. Spring学习（四）—— java动态代理（JDK和cglib）

    JAVA的动态代理 代理模式 代理模式是常用的java设计模式,他 的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托 ...

  3. lintocde-247-线段树的查询 II

    247-线段树的查询 II 对于一个数组,我们可以对其建立一棵 线段树, 每个结点存储一个额外的值 count 来代表这个结点所指代的数组区间内的元素个数. (数组中并不一定每个位置上都有元素) 实现 ...

  4. 【BioCode】将多个蛋白质序列分成单个的txt文档

    代码说明: fasta格式的蛋白质序列,一个txt里面有很多蛋白质序列,计算ss.pssm或disorder score时候都需要单条计算,需要分开. 分割前: 分割后: show you the c ...

  5. Snapseed玩出新高度，分分钟让你成p图大神！ 转

    (,,･∀･)ﾉ゛嗨呀 小阔爱们! 不知道大家记不记得~ 上周我们的副条发了一篇: <看过他的照片,我才知道什么是创意摄影> 德国仅22岁超现实主义艺术家Justin Peters 创造了 ...

  6. java 基础 --Collection(Set)

    注意: 如果hashSet存储自定义对象,一定要重写hashCode()&&equals() 如果TreeSet存储自定义对象,让元素所属的类实现自然排序接口Comparable,并重 ...

  7. IPv4编址及子网划分

    在讨论IP编址之前,我们需要讨论一下主机与路由器连入网络的方法.一台主机通常只有一条链路链接到网络:当主机中的IP想发送一个数据报时,它就在链路上发送,主机与物理链路之间的边界叫做接口(interfa ...

  8. bzoj2301-Problem b

    题意 \(T\le 5\times 10^4\) 次询问,每次询问 \(a,b,c,d,k\le 5\times 10^4\),求 \[ \sum _{i=a}^b\sum _{j=c}^d[gcd( ...

  9. C++解析-外传篇(1)：异常处理深度解析

    0.目录 1.异常的最终处理 2.结束函数terminate() 3.小结 1.异常的最终处理 问题: 如果在main函数中抛出异常会发生什么? 如果异常不处理,最后会传到哪里? 下面的代码的输出什么 ...

  10. jQuery高度及位置操作

    1. 获取滑轮位置,scrolltop:上下滚动的意思. <!DOCTYPE html> <html lang="en"> <head> < ...