label+input实现按钮开关切换效果的实例
更新时间：2017年08月16日 07:52:55 投稿：jingxian
下面小编就为大家带来一篇label+input实现按钮开关切换效果的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
代码如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.ipt {
display: none;
}
.box {
width: 74px;
height: 30px;
line-height: 30px;
overflow: hidden;
border: 1px solid #eee;
border-radius: 4px;
position: relative;
cursor: pointer;
}
label {display:inline-block;}
.ipt:checked + .box .switch-btn {
left: 0;
}
.switch-btn {
position: absolute;
left: -37px;
top: 0;
width: 111px;
height: 30px;
transition: all 0.5s;
}
.switch-btn span{
width: 37px;
height: 30px;
display: block;
text-align: center;
float: left;
font-size: 14px;
}
.on {
background: #52B13C;
color: white;
}
.white {
background: white;
}
.off {
background: #EEEEEE;
}
</style>
</head>
<body>
<p>主要使用label+input来实现改变left的值,下面是核心代码，意思就是<code>选中的input的兄弟节点.box下的.switch-btn元素的left会变成0px(原来是-37px);</code></p>
<pre>
.ipt:checked + .box .switch-btn {
left: 0;
}
</pre>
<p>当然要配合transition来实现</p>
<p>下面是效果</p>
<div class="wrap">
<label>
<input class="ipt" type="checkbox" name="" value="">
<div class="box">
<div class="switch-btn">
<span class="on">ON</span>
<span class="white"></span>
<span class="off">OFF</span>
</div>
</div>
</label>
</div>
<p>全部css代码</p>
<pre>
.ipt {
display: none;
}
.box {
width: 74px;
height: 30px;
line-height: 30px;
overflow: hidden;
border: 1px solid #eee;
border-radius: 4px;
position: relative;
cursor: pointer;
}
.ipt:checked + .box .switch-btn {
left: 0;
}
.switch-btn {
position: absolute;
left: -37px;
top: 0;
width: 111px;
height: 30px;
transition: all 0.5s;
}
.switch-btn span{
width: 37px;
height: 30px;
display: block;
text-align: center;
float: left;
font-size: 14px;
}
.on {
background: #52B13C;
color: white;
}
.white {
background: white;
}
.off {
background: #EEEEEE;
}
</pre>
</body>
</html>
以上这篇label+input实现按钮开关切换效果的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JS经典正则表达式笔试题,结合实例形式汇总分析了javascript正则表达式的经典使用技巧,需要的朋友可以参考下2016-12-12
很多项目中使用树来展示层级关系，还有些树是为了选中项然后其他地方调用选中项。今天脚本之家小编给大家带来了Bootstrap 树控件使用经验分享，需要的朋友参考下吧2017-11-11
下面小编就为大家带来一篇JS焦点图,JS 多个页面放多个焦点图的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-12-12
这篇文章主要介绍了JS FormData对象使用方法,结合实例形式详细分析了FormData对象的基本功能、原理及使用方法,需要的朋友可以参考下2020-02-02
这篇文章主要为大家详细介绍了JavaScript中let命令与const命令的用法及区别,文中的示例代码讲解详细,具有一定的借鉴价值,需要的可以参考下2023-09-09
这篇文章主要为大家详细介绍了小程序实现搜索界面，小程序实现推荐搜索列表效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要介绍了通过微信公众平台获取公众号文章的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了JavaScript超详细实现网页轮播图,我们经常会看到各种轮播图的效果，它们到底是怎样实现的呢？今天我们就一起来看一下具体实现方法吧2021-12-12
这篇文章主要为大家详细介绍了微信小程序表单验证form提交错误提示效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
这篇文章主要为大家详细介绍了如何通过JavaScript和Canvas实现带跳动效果的粒子动画，文中的示例代码讲解详细，感兴趣的小伙伴可以参考一下2023-03-03
最新评论