label+input实现按钮开关切换效果的实例


Posted in Javascript onAugust 16, 2017

代码如下所示:

<!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实现按钮开关切换效果的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript EXCEL 操作类代码
Jul 30 Javascript
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
JS中处理时间之setUTCMinutes()方法的使用
Jun 12 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
Sep 08 Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 #Javascript
vue实现点击图片放大效果
Aug 15 #Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 #jQuery
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 #Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 #jQuery
Vue组件通信实践记录(推荐)
Aug 15 #Javascript
js移动端事件基础及常用事件库详解
Aug 15 #Javascript
You might like
destoon实现调用热门关键字的方法
2014/07/15 PHP
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
input框中的name和id的区别
2016/11/16 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
vue-cli4.x创建企业级项目的方法步骤
2020/06/18 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
python批量实现Word文件转换为PDF文件
2018/03/15 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
python FTP编程基础入门
2021/02/27 Python
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
香港交友网站:be2香港
2018/07/22 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
J2EE面试题大全
2016/08/06 面试题
校友会欢迎辞
2014/01/13 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
银行职员工作失误检讨书
2014/10/14 职场文书
新教师个人总结
2015/02/06 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server