<!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. Android_layout 布局(一)

    今天主要学习了Android 的layout布局. Android layout 布局一般分为五种: LinearLayout (线性布局) :子组件按照垂直或者水平方向来布局. RelativeLa ...

  2. C语课设心得分享(二)

    咱们今儿说说IDE的事儿. IDE是「集成开发环境」的意思,比如咱们常用的VC6.0,就是开发C语言所用的IDE的一种.对于IDE的认识,可能有些朋友有点儿模糊,咱们捋一捋,我也会给出一些IDE方面的 ...

  3. HttpURLConnection 下载文件

    String fileUrl = request.getRequestURL().substring(0, request.getRequestURL().indexOf("/rest&qu ...

  4. android笔记:Notification通知的使用

    通知(Notification),当某个应用程序希望向用户发出一些提示信息,而该应用程序又不在前台运行时,就可以借助通知来实现. 发出一条通知后,手机最上方的状态栏中会显示一个通知的图标,下拉状态栏后 ...

  5. EnterpriseLibrary 6.0中DAAB独立数据库配置文件初始化

     string path = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "database.config");  IC ...

  6. 存在网路的情况下重命名SDE中数据图层错误(The orphan junction feature class cannot be renamed)

    运行环境为ArcGIS9.3,VS2008. 问题描述:数据通过SDE存储在Oracle10g数据库中,数据集中存在几何网络,在存在网络的情况下通过程序对其中的数据图层进行重命名,弹出"Th ...

  7. AFNetwork 作用和用法详解

    转自:http://www.cnblogs.com/mkai/p/5729685.html AFNetworking是一个轻量级的iOS网络通信类库.它建立在NSURLConnection和NSOpe ...

  8. TransactionScope 事务使用说明

    TransactionScope是.Net Framework 2.0滞后,新增了一个名称空间.它的用途是为数据库访问提供了一个“轻量级”[区别于:SqlTransaction]的事物.使用之前必须添 ...

  9. ASP.NET访问网络映射盘&实现文件上传读取功能

    最近在改Web的时候,遇到一个问题,要跨机器访问共享文件夹,以实现文件正常上传下载功能. 要实现该功能,可以采用HTTP的方式,也可以使用网络映射磁盘的方式,今天主要给大家分享一下使用网络映射磁盘的方 ...

  10. Jfinal 使用 JsonKit 转换不了问题

    使用bootStrap+jfinal开发一个管理系统,遇到了前台ajax获取数据,使用了jfinal的Jsonkit,将一个继承了model的vo进行转换,却一直没有将vo的属性值转换为json格式, ...