<!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. 底部tab的返回退出和对话框

    第一种: private long exitTime = 0; @Override public boolean dispatchKeyEvent(KeyEvent event) { if (even ...

  2. AEScrypto WEB and ANDROID (GITHUB)

    https://github.com/evgenyneu/aes-crypto-android https://github.com/evgenyneu/aes-crypto-web https:// ...

  3. gcc编译时指定链接库的查找目录

    gcc编译时,如果需要链接的库的目录不在标准目录,则需要通过将保护库的目录/aa/bb/cc通过-L/aa/bb/cc 添加到搜索路径中,如: gcc -o xmltest xml_test.cpp ...

  4. php 通过变量 来调用函数

    <?php function fun() { echo 'fun'; } $a = 'fun'; $a(); ?> 复制代码 上面的$a变量就是fun()函数,调用$a()和调用fun() ...

  5. Scrum会议（Beta版本）

    组名:天天向上 组长:王森 组员:张政.张金生.林莉.胡丽娜 代码地址:HTTPS:https://git.coding.net/jx8zjs/llk.git SSH:git@git.coding.n ...

  6. 利用fiddler模拟发送json数据的post请求

    fiddler是调试利器,有许多好用的功能,这里简单的介绍一下利用fiddler模拟发送post请求的例子 先简单介绍一下失败的例子,最后给出正确的方法

  7. mormot 数据集转换为JSON字串

    mormot 数据集转换为JSON字串 unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graph ...

  8. echo 换行不换行

    echo换行输出需要转义符 -e 看以下例子: echo -e "It is the first line." >> a; echo -e "It is th ...

  9. Nodejs Buffer

    javascript中的字符串本身就是以字符来存储,而非字节,下面的例子可以说明: console.log("0123456789".length); console.log(&q ...

  10. java动态加载类和静态加载类笔记

    JAVA中的静态加载类是编译时刻加载类  动态加载类指的是运行时刻加载类 二者有什么区别呢 举一个例子  现在我创建了一个类  实现的功能假设为通过传入的参数调用具体的类和方法 class offic ...