就是这个开关，代码是从weui上拷贝出来的。 至于weui自己百度吧 ^_^~

开关代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

    .weui_switch

    {

        -webkit-appearance: none;

        -moz-appearance: none;

        appearance: none;

        position: relative;

        width: 52px;

        height: 32px;

        border: 1px solid #DFDFDF;

        outline: 0;

        border-radius: 16px;

        box-sizing: border-box;

        background: #DFDFDF;

        -webkit-rtl-ordering: logical;

        -webkit-user-select: text;

        cursor: auto;

        display: inline-block;

        text-align: start;

    }

    .weui_switch:before {

        content: " ";

        position: absolute;

        top: 0;

        left: 0;

        width: 50px;

        height: 30px;

        border-radius: 15px;

        background-color: #FDFDFD;

        -webkit-transition: -webkit-transform .3s;

        transition: transform .3s;

    }

    .weui_switch:after {

        content: " ";

        position: absolute;

        top: 0;

        left: 0;

        width: 30px;

        height: 30px;

        border-radius: 15px;

        background-color: #FFFFFF;

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

        -webkit-transition: -webkit-transform .3s;

        transition: transform .3s;

    }

    .weui_switch:checked {

        border-color: #04BE02;

        background-color: #04BE02;

    }

    .weui_switch:checked:before {

        -webkit-transform: scale(0);

        transform: scale(0);

    }

    .weui_switch:checked:after {

        -webkit-transform: translateX(20px);

        transform: translateX(20px);

    }

    </style>

</head>

<body>

    <input type='checkbox' class='weui_switch'>

</body>

</html>

web之ios开关按钮的更多相关文章

  1. 敬请贤者：WEB、IOS开发（2年以上经验，大专）；CTO、产品经理，运营专员 电商服装鞋饰买手（2年以上经验，服装或鞋类）；体验店店长 （2年以上经验，服装或鞋类） 工作地点：丰台南苑路；有意者小窗QQ2211788980 - V2EX

    敬请贤者:WEB.IOS开发(2年以上经验,大专):CTO.产品经理,运营专员 电商服装鞋饰买手(2年以上经验,服装或鞋类):体验店店长 (2年以上经验,服装或鞋类) 工作地点:丰台南苑路:有意者小窗 ...

  2. 移动web在ios和android下点击元素出现阴影问题

     移动web开发经验总结 1.-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影.备注:transp ...

  3. web中ios移动端软键盘收起后，页面内容留白不下滑

    微信里面打开web页面,在ios软键盘收起时,页面键盘位置的内容留白,如下图 这个问题纠结了很久,然后请教了老大(威哥),看到页面老大给出的方案就是代码改变滚动条的位置. 这里就监听键盘收起的事件,来 ...

  4. 移动端Web开发,ios下 input为圆角

    在处理input的问题时,一般不想要input的原来的样式,一般就直接处理 border: none; outline: none; background: transparent; 这样之后,一般就 ...

  5. iOS开关按钮UISwitch控件

    开关按钮UISwitch 在ViewController.h里面 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 #import <UIKit/UIKit ...

  6. web页面ios浏览器img图片的坑

    大家都知道ios浏览器有个默认的内置事件,就是长按屏幕,会放大预览你点击的内容. 不同浏览器效果各异,有的浏览器弹出提示框,预览图片或保存图片.主要呈下面2中形式.体验最差的就是后者,会直接将页面中的 ...

  7. 仿IOS 开关按钮

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. ios开关按钮

    .al-toggle-button{ appearance: none; -webkit-appearance: none; position: relative; width: 52px; heig ...

  9. 那些年做过的 .NET Web 项目和 iOS 之路的一些思考

    从2010年3月份出来工作到2015年初,做过的大大小小的 .NET Web 项目如下: (1)售楼系统产品    「Role: Team Member」 (2)中弘合同管理系统    「Role: ...

随机推荐

  1. Java面试题之数据库三范式是什么

    为了建立冗余较小.结构合理的数据库,设计数据库时必须遵循一定的规则.在关系型数据库中这种规则就称为范式.范式是符合某一种设计要求的总结.要想设计一个结构合理的关系型数据库,必须满足一定的范式. 在实际 ...

  2. sql权限报表小知识

    EXEC sp_configure 'show advanced options', 1;RECONFIGURE;EXEC sp_configure 'xp_cmdshell', 1;RECONFIG ...

  3. html5滑动手势

    <div id="divMove" style="height: 100px;"></div> <div id="sli ...

  4. Thinkphp利用微信多客服消息推送取货二维码消息

    首先看微信官方的说法: 当用户主动发消息给公众号的时候(包括发送信息.点击自定义菜单.订阅事件.扫描二维码事件.支付成功事件.用户维权), 微信将会把消息数据推送给开发者,开发者在一段时间内(目前修改 ...

  5. C语言——strlen()和sizeof的区别

    strlen()和sizeof()的区别: strlen()——>C字符串库函数,返回字符串的真实长度.它是从内存某位置开始扫描,直到碰到结束符'\0'停止,返回计数器值. sizeof()—— ...

  6. Extjs Store 的用法详解

    Ext.data.Store的基本用法 在使用之前,首先要创建一个Ext.data.Store的实例,如下面的代码所示.       每个store最少需要两个组件的支持,分别是proxy和reade ...

  7. nodejs 下载网页及相关资源文件

    功能其实很见简单,通过 phantomjs.exe 采集 url 加载的资源,通过子进程的方式,启动nodejs 加载所有的资源,对于css的资源,匹配css内容,下载里面的url资源 当然功能还是很 ...

  8. cocos2d-x -------之笔记篇 环境的安装

    cocos2d-x -------之笔记篇 环境的安装 使用到的工具有VS2010  cygwin android-NDK eclipse android SDK 1.首先是android相关环境的安 ...

  9. 柯南君：看大数据时代下的IT架构（2）消息队列之RabbitMQ-基础概念详细介绍

    一.基础概念详细介绍 1.引言 你是否遇到过两个(多个)系统间需要通过定时任务来同步某些数据?你是否在为异构系统的不同进程间相互调用.通讯的问题而苦恼.挣扎?如果是,那么恭喜你,消息服务让你可以很轻松 ...

  10. C语言入门（10）——if分支语句

    在我们写的函数中可以有多条语句,但这些语句总是从前到后顺序执行的.除了从前到后顺序执行之外,有时候我们需要检查一个条件,然后根据检查的结果执行不同的后续代码,在C语言中可以用分支语句实现,比如: if ...