switch滑动开关
<!DOCTYPE html>
<html>
<head >
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*
使用:
1、html:修改input id和label for onclick="test1()"
2、css:修改#switch1:checked~label:before名字
修改#switch1:checked~label名字
3、js:函数名字 改按钮大小
1、改switch-container的宽高
2、改label:before的宽为switch-container的宽
3、改#switch:checked~label:before的left为switch-container的宽
*/ /* 开关的大小*/
.switch-container{
height: 24px;
width:48px; }
/*设置checkbox不显示*/
.switch{
display: none;
}
/*设置label标签为椭圆状*/
.switch-container label{
display: block;
background-color: #eee;
height: 100%;
width: 100%;
cursor: pointer;
border-radius: 25px;
position: relative;
}
/*在label标签内容之前添加如下样式,形成一个未选中状态*/
.switch-container label:before {
content: '';
display: block;
border-radius: 25px;
height: 100%;
width: 24px;
background-color: white;
position: absolute;
left: 0px;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
} /*选中后,未选中样式消失*/
#switch:checked~label:before {
left: 24px;
} /*选中后label的背景色改变*/
#switch:checked~label {
background-color: #4dbd74;
} /*选中后,未选中样式消失*/
#switch1:checked~label:before {
left: 24px;
} /*选中后label的背景色改变*/
#switch1:checked~label {
background-color: #4dbd74;
} </style> </head>
<body>
<div class="switch-container ">
<input type="checkbox" id="switch" class="switch">
<label for="switch" onclick="test()"></label>
</div> <div class="switch-box" style="width: 100px;">
<div class="switch-container " style="float: left;">
<input type="checkbox" id="switch1" class="switch">
<label for="switch1" onclick="test1()"></label>
</div>
<div style="float: right;">
<span id="switch1Con">选中</span>
</div>
</div> <script>
var test = function(){
console.log(!document.getElementById('switch').checked ? "选中" : "未选中");
}
var test1 = function(){
if (!document.getElementById('switch1').checked ) {
document.getElementById('switch1Con').innerHTML="开启";
}else{
document.getElementById('switch1Con').innerHTML="开启";
} }
</script>
</body>
</html>
switch滑动开关的更多相关文章
- android widgets控件
1.TextView 类似,C#里的lable,显示一段文本 <TextView android:id="@+id/textView2" android:layout_wid ...
- 【转】Android SwitchButton(滑动开关)
原文网址:http://blog.csdn.net/wangjinyu501/article/details/27961303 版本:1.0 日期:2014.5.17 2014.6.1 版权:© 20 ...
- Android SwitchButton(滑动开关)
@RemoteView public class Button extends TextView { public Button(Context context) { this(context, nu ...
- 自定义控件(视图)2期笔记05:自定义控件之继承自View(滑动开关)
1. 开关按钮点击效果,如下: 2. 继承已有View实现自定义View 3. 下面通过一个案例实现滑动开关的案例: (1)新建一个新的Android工程,命名为" 开关按钮", ...
- SlipButton——滑动开关
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjI1MjUwMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQk ...
- Android实现Material Design风格的设置页面(滑动开关控件)
前言 本文链接 http://blog.csdn.net/never_cxb/article/details/50763271 转载请注明出处 參考了这篇文章 Material Design 风格的设 ...
- android自定义控件——以滑动开关为例
0.引言 (1)Android从4.0开始提供了switch的滑动开关效果组件,但是之前版本却没有 (2)很多时候我们写程序,都希望把有用的通用的通用的东西封装起来,以便以后重用. 本文根据组件开发思 ...
- Partition:分区切换(Switch)
在SQL Server中,对超级大表做数据归档,使用select和delete命令是十分耗费CPU时间和Disk空间的,SQL Server必须记录相应数量的事务日志,而使用switch操作归档分区表 ...
- java中if和switch哪个效率快
首先要看一个问题,if 语句适用范围比较广,只要是 boolean 表达式都可以用 if 判断:而 switch 只能对基本类型进行数值比较.两者的可比性就仅限在两个基本类型比较的范围内.说到基本类型 ...
随机推荐
- BVT与冒烟测试
[BVT的释义] BVT的全称是Build Verification Test.可以说这个全称就是BVT的定义了. BVT只验证build构建的成功与失败,不深入测试构建好的build的功能.性能等等 ...
- css 元素水平垂直方向居中
html部分 <div class="parent"> <div class="child"> - -居中- - </div> ...
- 作业 20181120-3 Beta发布
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2408 小组介绍 组长:付佳 组员:张俊余 李文涛 孙赛佳 田良 于洋 段 ...
- Beta发布-----欢迎来怼团队
欢迎来怼项目小组—Beta发布展示 一.小组成员 队长:田继平 成员:葛美义,王伟东,姜珊,邵朔,阚博文 ,李圆圆 二.文案+美工展示 链接:http://www.cnblogs.com/js2017 ...
- 31. Ubuntu15.04系统中如何启用、禁用客人会话
https://jingyan.baidu.com/article/046a7b3edf9639f9c27fa995.html 31. Ubuntu15.04系统中如何启用.禁用客人会话 听语音 | ...
- p2 入门
心里一片空白,要弄个p2的demo出来... 先了解下p2的概念吧 P2只是一个算法库,以刚体为对象模型,模拟并输出物理碰撞.运动结果.这个过程通过持续调用world中的step()方法来实现 p2的 ...
- jquery截取手机号中间4位数,然后变为*
$(function() { var phone = $('#phone').text(); var mphone = phone.substr(0, 3) + '****' + phone.subs ...
- java面试及答案
优秀总结博客 mybatis总结 java并发包相关 一.Java基础 1.String类为什么是final的. 2.HashMap的源码,实现原理,底层结构. hashmap3.反射中,Class. ...
- HDU4802_GPA
水题. #include <iostream> #include <cstdio> #include <cstring> using namespace std; ...
- 【bzoj3573】[HNOI2014]米特运输 树形dp
题目描述 米特是D星球上一种非常神秘的物质,蕴含着巨大的能量.在以米特为主要能源的D星上,这种米特能源的运输和储存一直是一个大问题.D星上有N个城市,我们将其顺序编号为1到N,1号城市为首都.这N个城 ...