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显示选择目录对话框的代码
Nov 10 Javascript
ECMAScript 创建自己的js类库
Nov 22 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
JavaScript的类型、值和变量小结
Jul 09 Javascript
jQuery动画效果图片轮播特效
Jan 12 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
JS正则表达式之非捕获分组用法实例分析
Dec 28 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
Ajax实现页面无刷新留言效果
Mar 24 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
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
angular十大常见问题
2017/03/07 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
微信小程序promsie.all和promise顺序执行
2017/10/27 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
Python获取服务器信息的最简单实现方法
2015/03/05 Python
python模拟事件触发机制详解
2018/01/19 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
Python爬虫爬取有道实现翻译功能
2020/11/27 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
银行求职信怎么写
2014/05/26 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
2015年端午节活动总结
2015/02/11 职场文书
道歉的话怎么说
2015/05/12 职场文书
辛亥革命观后感
2015/06/02 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server
Linux中各个目录的作用与内容
2022/06/28 Servers