有IOS的开关模拟，当然也有MIUI的开关模拟

看到设置选项里面的开关样式，突发奇想地来试试

  

最终效果如图：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			.switch-wrap {

				position: relative;

				margin: 50px auto;

				width: 120px;

				height: 40px;

				font: 14px/1.5 Arial, Sans-Serif;

			}

			.switch,

			.switch input,

			.switch input:before {

				width: 30px;

				height: 14px;

			}

			.switch input {

				position: absolute;

				right: 0;

			}

			.switch input:before {

				content: '';

				display: inline-block;

				position: relative;

				border-radius: 20px;

				border: 1px solid #ccccc6;

				box-shadow: 0 0 1px 1px #ececf3;

				background-color: #fff;

				cursor: pointer;

			}

			.switch input:after {

				content: '';

				position: absolute;

				width: 12px;

				height: 12px;

				top: 2px;

				left: 3px;

				border-radius: 50%;

				background-color: #ccccc6;

				transition: .2s left, .2s background-color;

			}

			.switch input:checked:after {

				left: 15px;

				background-color: #36a6fa;

				transition: .2s left, .2s background-color;

			}

		</style>

		<script src="jquery.js"></script>

		<script type="text/javascript">

			$('#switch').change(function() {

				$('.switch-action').text(this.checked ? '关闭' : '开启');

			});

		</script>

	</head>

	<body>

		<div class="switch-wrap">

			<span><span class="switch-action">开启</span>WLAN</span>

			<label class="switch">

            <input type="checkbox" name="switch" id="switch">

        </label>

		</div>

	</body>

</html>

　　

实现过程

1. 选项框checkbox

模拟开关当然需要一个选项框，这里用到了复选框checkbox

2. 理解开关的过程

点击开关按钮，则开启或关闭。原生的checkbox无法做到图示的效果，所以就需要额外的元素来表示图中的开关

而我们又要使用到checkbox的点击效果以及点击后是否选中（checked）的效果，所以checkbox不能隐藏，但可以用覆盖的方式

为了减少多余标签的使用，可以使用伪元素:before、:after ，标签结构为

　　<div class="switch-wrap">

        <span><span class="switch-action">开启</span>WLAN</span>

        <label class="switch">

            <input type="checkbox" name="switch" id="switch">

        </label>

    </div>

3. 开关的实现

用:before伪元素作为开关背景层，用:after伪元素作为开关项（即那个小圆圈）

        .switch input:before {

            content: '';

            display: inline-block;

            position: relative;

            border-radius: 20px;

            border: 1px solid #ccccc6;

            box-shadow: 0 0 1px 1px #ececf3;

            background-color: #fff;

            cursor: pointer;

        }
        .switch input:after {

            content: '';

            position: absolute;

            width: 12px;

            height: 12px;

            top: 2px;

            left: 3px;

            border-radius: 50%;

            background-color: #ccccc6;

            transition: .2s left, .2s background-color;

        }

初始小圆圈在左侧，当开关状态为开启时，右移，并更新开启状态的背景色

        .switch input:checked:after {

            left: 15px;

            background-color: #36a6fa;

            transition: .2s left, .2s background-color;

        }

以上就是关键的代码了，以下为完整的样式

 1 <style>

 2     .switch-wrap {

 3             position: relative;

 4             margin: 50px auto;

 5             width: 120px;

 6             height: 40px;

 7             font: 14px/1.5 Arial, Sans-Serif;

 8         }

 9

10         .switch,

11         .switch input,

12         .switch input:before {

13             width: 30px;

14             height: 14px;

15         }

16

17         .switch input {

18             position: absolute;

19             right: 0;

20         }

21

22         .switch input:before {

23             content: '';

24             display: inline-block;

25             position: relative;

26             border-radius: 20px;

27             border: 1px solid #ccccc6;

28             box-shadow: 0 0 1px 1px #ececf3;

29             background-color: #fff;

30             cursor: pointer;

31         }

32

33         .switch input:after {

34             content: '';

35             position: absolute;

36             width: 12px;

37             height: 12px;

38             top: 2px;

39             left: 3px;

40             border-radius: 50%;

41             background-color: #ccccc6;

42             transition: .2s left, .2s background-color;

43         }

44

45         .switch input:checked:after {

46             left: 15px;

47             background-color: #36a6fa;

48             transition: .2s left, .2s background-color;

49         }

50

51

52     </style>

4. 开关的测试

最后，可结合JS检测一下开关的状态变化

    <script src="jquery.js"></script>

    <script type="text/javascript">

        $('#switch').change(function() {

            $('.switch-action').text(this.checked ? '关闭' : '开启');

        });

    </script>
[-_-]眼睛累了吧，注意劳逸结合呀[-_-]

IOS开关效果的更多相关文章

  1. 自己定义控件：onDraw 方法实现仿 iOS 的开关效果

    概述 本文主要解说怎样在 Android 下实现高仿 iOS 的开关按钮,并不是是在 Android 自带的 ToggleButton 上改动,而是使用 API 提供的 onDraw.onMeasur ...

  2. android 仿ios开关控件

    ios一些控件还是挺美丽的,可是对android程序猿来说可能比較苦逼,由于ios一些看起来简单的效果对android来说可能就没那么简单了,可是没办法非常多产品都是拿ios的一些控件叫android ...

  3. 【转】提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果

    原文网址:http://www.zhimengzhe.com/IOSkaifa/37910.html MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显 ...

  4. Android仿IOS回弹效果 ScrollView回弹 总结

    Android仿IOS回弹效果  ScrollView回弹 总结 应项目中的需求  须要仿IOS 下拉回弹的效果 , 我在网上搜了非常多 大多数都是拿scrollview 改吧改吧 试了一些  发现总 ...

  5. Android 实现高仿iOS桌面效果之可拖动的GridView（上）

    转载请标明出处:http://blog.csdn.net/sk719887916/article/details/40074663,作者:skay      最近项目中遇到一个LIstview的拖动效 ...

  6. iOS 波浪效果的实现

    iOS 波浪效果的实现 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #4f8187; background-c ...

  7. 【iOS系列】- iOS吸附效果的实现 之 UICollectionView的使用全解

    [iOS系列]- iOS吸附效果的实现 之 UICollectionView的使用全解 UICollectionView可以做很多的布局,在iOS开发中较为重要,所以这里就以实例来讲解UICollec ...

  8. iOS 复选框风格转换 Switchery 开关效果

    Switchery 是个简单的 JavaScript 组件,只要几个简单的步骤就可以帮助用户把默认的 HTML 复选框转换成漂亮 iOS 7 样式风格.用户可以很方便的自定义这种转换,所以可以很好的配 ...

  9. js模仿ios select效果

    github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...

随机推荐

  1. C#矩形框沿直线移动

    C#中用GDT+的一系列方式,可以绘制各种图形:点,直线,圆形,矩形...... C#中这些图形的绘制,一般教程的demo中给出的代码,是在Form1_Paint(object sender, Pai ...

  2. JavaWeb知识回顾－servlet生命周期。

    Servlet生命周期 生命周期,很容易理解,拿人来说,就是你从出生到离开的这一过程.无论是什么技术,只要谈到生命周期都可以这样理解. Servlet的生命周期就是从它被创建到毁灭的过程,整个过程可以 ...

  3. yii2 DateTimePicker显示到天

    扩展是 kartik\datetime\DateTimePicker; 关键是加入此配置  'minView'=> "month",示例如下: <?php echo D ...

  4. Js~对数组的操作

    在工作中可能用的不多,但一些特殊的场合还是会用到,所以在这里,把JS的数组操作总结一下,分享给大家! Array 对象 Array 对象用于在单个的变量中存储多个值. 创建 Array 对象的语法: ...

  5. 【LOJ】 #2013. 「SCOI2016」幸运数字

    题解 最大异或和,明显是个线性基 然而还有那么多路径--那就树分治,反正点数看起来很少,就是为了让人乘上一个60的常数嘛 把一个树的点分树记录下来,然后看看询问的两个点彼此相同的最后一个父亲是谁,把这 ...

  6. HTML5 Canvas游戏开发（一）基础知识

    一.绘制基本图形 在每次用canvas画布时,都有几步是“套路” 1.在HTML中创建Canvas画布: <canvas id="mycanvas" width=" ...

  7. 自定义mvc验证特性，手机号号段老增加，给自定义一个RegularExpress

    public class PhoneExpressionAttribute: RegularExpressionAttribute, IClientValidatable { public Phone ...

  8. 转：在 Ubuntu 上使用 Nginx 部署 Flask 应用

    转:http://Python.jobbole.com/84286/ 原文出处: Vladik   译文出处:开源中国    我职业生涯的大部分都在使用微软的架构,最近我决定走出技术的舒适区,步入开源 ...

  9. JAVA编程思想读书笔记（三）--RTTI

    接上篇JAVA编程思想读书笔记(二) 第十一章 运行期类型判定 No1: 对于作为程序一部分的每个类,它们都有一个Class对象.换言之,每次写一个新类时,同时也会创建一个Class对象(更恰当的说, ...

  10. python爬虫实战（六）--------新浪微博（爬取微博帐号所发内容，不爬取历史内容）

    相关代码已经修改调试成功----2017-4-13 详情代码请移步我的github:https://github.com/pujinxiao/sina_spider 一.说明 1.目标网址:新浪微博 ...