<!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. POJ 1228 - Grandpa's Estate 稳定凸包

    稳定凸包问题 要求每条边上至少有三个点,且对凸包上点数为1,2时要特判 巨坑无比,调了很长时间= = //POJ 1228 //稳定凸包问题,等价于每条边上至少有三个点,但对m = 1(点)和m = ...

  2. css小tip

    1. <input>标签的默认样式 当在页面中添加一个input标签,当点击输入框时会有一个外边框包裹着,可以使用 : input { outline: none} 去除点击时产生的外边框 ...

  3. web工程中URL地址的推荐写法

    三.web工程中URL地址的推荐写法 使用c标签<c:url value="" /> 会自动添加项目名 -> value中的值 前面要加 “/” 在JavaWeb ...

  4. Hessian 初探

    Hessian 是一个序列化协议, 他的优点在于比 Java 原生的对象序列化/反序列化速度更快, 序列化出来以后的数据更小. 序列化协议跟应用层协议无关, 可以将 Hessian 序列化以后的数据放 ...

  5. C/C++语言的一些精简归纳

    前言:本想直接写个关于OC语言,但觉得还是要说下C先. 先语言特性 C是面向过程的,没有类和对象概念,也就没有什么封装(这个?).继承.多态等特性. 而且是是中级语言,其编译过程包括:预编译(incl ...

  6. CSS样式之语法

    选择符 选择符 {属性1:属性值1;属性2:属性值2} 选择符(selector):指定样式适用的标签,除指定标签外,样式不起作用 属性:样式的关键字 属性值:描述样式的值: 格式:属性与属性之间使用 ...

  7. 自定义php安装（2）—mysql安装和php整合

    1.      写一段php 代码来测试是否成功! //目前你看不懂,没关系 <?php $conn=mysql_connect("localhost","root ...

  8. Browser默认书签加载过程

    Browser配置默认书签——string.xml中<string-array name="bookmarks" translatable="false" ...

  9. ZOJ2532_Internship

    一个单源多汇的有向图,求增大那些边的容量可以使得网络的最大流增加. 很简单,直接跑最大流,保留残余网络,然后枚举所有余量为0的边,使其容量增加一个1,看看是否出现新的增广路即可. 召唤代码君: #in ...

  10. 解决hibernate中的懒加载(延迟加载)问题

    解决hibernate中的懒加载(延迟加载)问题   我们在开发的时候经常会遇到延迟加载问题,在实体映射时,多对一和多对多中,多的一样的属性默认是lazy="true"(即,默认是 ...