仿IOS 开关按钮
<!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 开关按钮的更多相关文章
- 自己定义控件：onDraw 方法实现仿 iOS 的开关效果
概述 本文主要解说怎样在 Android 下实现高仿 iOS 的开关按钮,并不是是在 Android 自带的 ToggleButton 上改动,而是使用 API 提供的 onDraw.onMeasur ...
- Html - 仿Ios assistiveTouch 悬浮辅助球工具
仿Ios assistiveTouch 悬浮辅助球工具 <!DOCTYPE html> <html> <head> <meta charset="u ...
- Android仿IOS回弹效果 ScrollView回弹 总结
Android仿IOS回弹效果 ScrollView回弹 总结 应项目中的需求 须要仿IOS 下拉回弹的效果 , 我在网上搜了非常多 大多数都是拿scrollview 改吧改吧 试了一些 发现总 ...
- Ion-affix & Ion-stick 仿IOS悬浮列表插件
Ion-affix & Ion-stick 仿IOS悬浮列表插件 Ion-affix 1.相关网页 Ion-affix 2.环境准备: 执行命令 bower install ion-affix ...
- vue 2 仿IOS 滚轮选择器 从入门到精通 （一）
大家好,由于最近从事的是微信公众号和APP内嵌 H5开发,避免不了开发一些和native相同的操作功能,就如接下来说的 仿IOS滚轮选择器. 先来个截图: 接下来具体介绍如何实现的.能力有限避免不了错 ...
- Android-PickerView【仿iOS的PickerView控件，并封装了时间选择和选项选择这两种选择器】使用
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本文主要演示Android-PickerView的选项选择器.时间选择器的简单运用.由于每一个版本略有不用,所以实际使用方式以git ...
- WPF C#仿ios 安卓 红点消息提示
原文:WPF C#仿ios 安卓 红点消息提示 先把效果贴出来,大家看看. 代码下载地址: http://download.csdn.net/detail/candyvoice/9730751 点击+ ...
- CSS 仿 iOS 系统通知数字样式
/** 仿 iOS 系统通知数字样式 **/ .num_span{ background-color: #f00; background-image: -webkit-linear-gradient( ...
- 在uwp仿IOS的页面切换效果
有时候我们需要编写一些迎合IOS用户使用习惯的uwp应用,我在这里整理一下仿IOS页面切换效果的代码. 先分析IOS的页面切换.用户使用左右滑动方式进行前进和后退,播放类似于FlipView的切换动画 ...
随机推荐
- INNO SETUP 5.5.0以上版本中文语言包
; *** Inno Setup version 5.5.0+ Chinese messages ***;; To download user-contributed translations of ...
- [2015hdu多校联赛补题]hdu5371 Hotaru's problem
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5371 题意:把一个数字串A翻过来(abc翻过来为cba)的操作为-A,我们称A-AA这样的串为N-se ...
- [原创]Matlab之GUI生成EXE文件
近期因为项目需要,简化流程,写了一些Matlab程序,并配备上了GUI界面使其简单易用.然后问题来了,可移植性.使用Matlab生成EXE文件(可以封装很多的function),然后在一台安装有Mat ...
- Selenium2+python自动化26-js处理内嵌div滚动条
前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦. 一.内嵌滚动条 1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相.
- Linux 下安装 jdk压缩包
按 esc 退出 记得 输入 :q 记得 : Linux下安装jdk 把压缩文件放在 桌面的soft 下 在usr目录下新建文件夹Java,把文件复制到 usr/java 更改下路径! 3 ...
- java基础-java核心知识库
本人从事java开发6年左右,主要从事互联网相关的开发,目前还是奋战在一线的码农,痛并快乐着.受互联网产品热潮的影响,关注高性能低成本架构,互联网开发框架,以下是我认为作为一个资深java程序员应该掌 ...
- javascript 高级程序设计 十二
1.组合使用原型模式和构造函数模式: 由于原型模式创建对象也有它的局限性------有智慧的人就把原型模式和构造函数模式进行了组合. function Person(name, age, job){/ ...
- IOS 代码块传值
#import <UIKit/UIKit.h> typedef void (^MyBlock)(NSString*); @interface SecondViewController : ...
- meta http-equiv='refresh' 解读
页面定期刷新,如果加url的,则会重新定向到指定的网页,content后面跟的是时间(单位秒), 把这句话加到指定网页的<head></head>里 一般也用在实时性很强的应用 ...
- Oracle中用一条Sql实现任意的行转列拼接 多行拼接
表结构和数据如下(表名Test): NO VALUE NAME 1 a 测试1 1 b 测试2 1 c 测试3 1 d 测试4 2 e 测试5 4 f 测试6 4 g 测试7 Sql语句: selec ...