<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>apple button</title>

		<style type="text/css">

			#div1 {

				width: 170px;

				height: 100px;

				border-radius: 50px;

				border: 1px solid green;

				position: relative;

			}

			#div2 {

				width: 96px;

				height: 96px;

				border-radius: 48px;

				position: absolute;

				background: red;

				box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);

			}

			.open1 {

				background: blue;

			}

			.open2 {

				top: 2px;

				right: 1px;

			}

			.close1 {

				background: yellow;

				border: 3px solid green;

				border-left: transparent;

			}

			.close2 {

				left: 0px;

				top: 0px;

				border: 2px solid rgba(0, 0, 0, 0.1);

			}

		</style>

		<script type="text/javascript">

			window.onload = function() {

				var div2 = document.getElementById("div2");

				var div1 = document.getElementById("div1");

				div2.onclick = function() {

					div1.className = (div1.className == "close1") ? "open1" : "close1";

					div2.className = (div2.className == "close2") ? "open2" : "close2";

				}

			}

		</script>

	</head>

	<body>

		<div id="div1" class="open1">

			<div id="div2" class="open2"></div>

		</div>

	</body>

</html>

　　

仿IOS 开关按钮的更多相关文章

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

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

  2. Html - 仿Ios assistiveTouch 悬浮辅助球工具

    仿Ios assistiveTouch 悬浮辅助球工具 <!DOCTYPE html> <html> <head> <meta charset="u ...

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

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

  4. Ion-affix & Ion-stick 仿IOS悬浮列表插件

    Ion-affix & Ion-stick 仿IOS悬浮列表插件 Ion-affix 1.相关网页 Ion-affix 2.环境准备: 执行命令 bower install ion-affix ...

  5. vue 2 仿IOS 滚轮选择器 从入门到精通 （一）

    大家好,由于最近从事的是微信公众号和APP内嵌 H5开发,避免不了开发一些和native相同的操作功能,就如接下来说的 仿IOS滚轮选择器. 先来个截图: 接下来具体介绍如何实现的.能力有限避免不了错 ...

  6. Android-PickerView【仿iOS的PickerView控件，并封装了时间选择和选项选择这两种选择器】使用

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本文主要演示Android-PickerView的选项选择器.时间选择器的简单运用.由于每一个版本略有不用,所以实际使用方式以git ...

  7. WPF C#仿ios 安卓 红点消息提示

    原文:WPF C#仿ios 安卓 红点消息提示 先把效果贴出来,大家看看. 代码下载地址: http://download.csdn.net/detail/candyvoice/9730751 点击+ ...

  8. CSS 仿 iOS 系统通知数字样式

    /** 仿 iOS 系统通知数字样式 **/ .num_span{ background-color: #f00; background-image: -webkit-linear-gradient( ...

  9. 在uwp仿IOS的页面切换效果

    有时候我们需要编写一些迎合IOS用户使用习惯的uwp应用,我在这里整理一下仿IOS页面切换效果的代码. 先分析IOS的页面切换.用户使用左右滑动方式进行前进和后退,播放类似于FlipView的切换动画 ...

随机推荐

  1. Hosting static website on AWS

    http://docs.aws.amazon.com/AmazonS3/latest/dev/website-hosting-custom-domain-walkthrough.html#root-d ...

  2. iconv命令 gbk 转 UTF-8

    -----linux gbk 转 UTF-8-------- iconv 用法 iconv -f "gbk" -t "utf-8" < infile &g ...

  3. Missing letters

    function fearNotLetter(str) { //return str; var arr = str.split(''); var temp = []; var start = str. ...

  4. 小甲鱼python视频第七讲（课后习题）

    1.assert的作用. assert用来判断语句的真假,如果为假的话将触发AssertionError错误. 如果为真则继续执行. 2.变量互换(注意顺序) 3.成员资格运算符(in) 4.分数的划 ...

  5. 利用iframe无刷新上传文件的坑

    页面里经常要用到文件上传的功能,而且要求页面不刷新,先说一下原理:页面里放一个file控件和submit按钮,外面用form表单包住,给form表单加上对应的属性值,action.method.ent ...

  6. div box container随主体内容自动扩展适应的实现

    /**顶部部分*/ .con-tl{ background:url(../images/left.png) no-repeat 0 0 rgba(0, 0, 0, 0); padding-left: ...

  7. 通过indexPath找到对应的cell

    在- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 这个方法中通过 ...

  8. 使用 IntraWeb (43) - 测试读取 SqLite (二)

    一般情况下, 数据源相关控件应该有数据模块中统一管理, 这也方便其他窗体调用; UserSessionUnit 就是一个现成的数据模块. 现在把数据源相关控件放在 UserSessionUnit 的窗 ...

  9. ycsb使用方法

    ycsb本身相当于客户端,不断向服务端发送请求,同时记录下这些请求耗费的时间. 那么,必须要有一个服务端在某个端口监听. ycsb可以在workload里写入服务端的ip和端口,也可以在命令行里写上. ...

  10. 进程调度算法Linux进程调度算法

    这次介绍一下操作系统的进程调度算法 操作系统的调度分为三种:1.远程调度(创建新进程):2.中程调度(交换功能的一部分):3.短程调度(下次执行哪个进程) 这次讲述的就是短程调度,可以简单的看作咱们平 ...