仿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的切换动画 ...
随机推荐
- Repeater展示表格
1.可以不用table展示数据 <asp:Repeater ID="Repeater1" runat="server"> <ItemTempl ...
- Android菜鸟成长记1--环境的搭配和第一个项目的构建
一.配置Android环境 1.下载JavaJDK的本地,然后拷贝出来(因为Android实在java的基础上开发的,所以要先配置java环境) 2.java环境变量的配置 配置方法(我的电脑上-&g ...
- const实现
[const实现]
- 使用__slots__
[使用__slots__] 参考: 1.http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a0 ...
- Java NIO教程 Selector
这次我们开讲非阻塞I/O中的Selector,它需要配合非阻塞的TCP和UDP来使用.首先我们先简单讲一下TCP和UDP的非阻塞通道. 非阻塞I/O通道 在上代码前我们先讲解一些最基本的知识.TCP和 ...
- [2015hdu多校联赛补题]hdu5371 Hotaru's problem
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5371 题意:把一个数字串A翻过来(abc翻过来为cba)的操作为-A,我们称A-AA这样的串为N-se ...
- java代码性能优化总结(转载)
原文链接:http://developer.51cto.com/art/201511/496263.htm 前言 代码优化,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改 ...
- linux--分卷压缩解压缩
1.先压缩目录为一个文件 root@ip# tar zcvf apk.tar apk/ 2.对文件进行切分,-d表示切分后的文件后缀已数字区分(如apk_2015.tar01,apk_2015.tar ...
- Python：生成器
生成器:使用了 yield 的函数被称为生成器(generator).它记住上一次返回时在函数体中的位置. yeild运行过程:当你向生成器要一个数时,生成器会执行,直至出现 yield 语句,生成器 ...
- SQl server master
取一段连续时间,SQl server 2008可用,其他版本暂时没测试. ), ), )), ) ...