IOS开关效果
有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开关效果的更多相关文章
- 自己定义控件：onDraw 方法实现仿 iOS 的开关效果
概述 本文主要解说怎样在 Android 下实现高仿 iOS 的开关按钮,并不是是在 Android 自带的 ToggleButton 上改动,而是使用 API 提供的 onDraw.onMeasur ...
- android 仿ios开关控件
ios一些控件还是挺美丽的,可是对android程序猿来说可能比較苦逼,由于ios一些看起来简单的效果对android来说可能就没那么简单了,可是没办法非常多产品都是拿ios的一些控件叫android ...
- 【转】提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果
原文网址:http://www.zhimengzhe.com/IOSkaifa/37910.html MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显 ...
- Android仿IOS回弹效果 ScrollView回弹 总结
Android仿IOS回弹效果 ScrollView回弹 总结 应项目中的需求 须要仿IOS 下拉回弹的效果 , 我在网上搜了非常多 大多数都是拿scrollview 改吧改吧 试了一些 发现总 ...
- Android 实现高仿iOS桌面效果之可拖动的GridView（上）
转载请标明出处:http://blog.csdn.net/sk719887916/article/details/40074663,作者:skay 最近项目中遇到一个LIstview的拖动效 ...
- iOS 波浪效果的实现
iOS 波浪效果的实现 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 14.0px Menlo; color: #4f8187; background-c ...
- 【iOS系列】- iOS吸附效果的实现 之 UICollectionView的使用全解
[iOS系列]- iOS吸附效果的实现 之 UICollectionView的使用全解 UICollectionView可以做很多的布局,在iOS开发中较为重要,所以这里就以实例来讲解UICollec ...
- iOS 复选框风格转换 Switchery 开关效果
Switchery 是个简单的 JavaScript 组件,只要几个简单的步骤就可以帮助用户把默认的 HTML 复选框转换成漂亮 iOS 7 样式风格.用户可以很方便的自定义这种转换,所以可以很好的配 ...
- js模仿ios select效果
github:https://github.com/zhoushengmufc/iosselect webapp模仿ios下拉菜单 html下拉菜单select在安卓和IOS下表现不一样,iossel ...
随机推荐
- What does “=>” mean in import in scala?(转自StackOverflow问答)
As others have mentioned, it's an import rename. There is however one further feature that proves ...
- struct中长度为0的数组用途与原理
前言 在标准C和C++中,长度为0的数组是被禁止使用的.不过在GNUC中,存在一个非常奇怪的用法,那就是长度为0的数组,比如Array[0]; 很多人可能觉得不可思议,长度为0的数组是没有什么意义的, ...
- POJ 2513 Colored Sticks（Tire+欧拉回（通）路判断）
题目链接:http://poj.org/problem?id=2513 题目大意:你有好多根棍子,这些棍子的两端分都别涂了一种颜色.请问你手中的这些棍子能否互相拼接,从而形成一条直线呢? 两根棍子只有 ...
- LightOJ 1414 February 29（闰年统计+容斥原理）
题目链接:https://vjudge.net/contest/28079#problem/R 题目大意:给你分别给你两个日期(第二个日期大于等于第一个日期),闰年的2月29日称为闰日,让你求两个日期 ...
- socket-----爬虫&&文件传输
最近想着写几个小demo 写了一个爬虫,用的是C++,基本思想就是一层一层的找类似深搜吧,抓取的页面是www.cnblogs.com,从localhost发送request请求,给www.cnblog ...
- mac os版本Intellij IDEA 搭建spring mvc的maven工程（新手教学）
由于近期换了新公司,又换mac pro作为新电脑,打算把用了很多年的eclipse换成IDEA(IDEA比eclipse的好处我就不多说了),由于mac os和IDEA刚开始用不久,所以专门用一篇博客 ...
- mac下docker中安装nodejs
一.首先下载docker并安装 https://download.docker.com/mac/stable/Docker.dmg 然后启动docker, 二.获取node最新镜像 输入来着node版 ...
- 使用coding云作为git远程库
1.在命令行中创建GIT仓库 mkdir DriveAssistant cd DriveAssistant git init echo "# DriveAssistant" > ...
- centos6下mysql的主从复制的配置
2015年9月17日 23:00:36 update 想要好好了解mysql复制,还是去看看<高性能MySQL>(第三版)好了,上面说的比较详细. =========== 在本地用virt ...
- 使用Python快速查询所有指定匹配KEY的办法
import redis redis_ip = '10.10.14.224' redis_port = 18890 # 配置redis的连接办法 # http://blog.csdn.net/u010 ...