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 相关文章推荐
基于JQuery.timer插件实现一个计时器
Apr 25 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
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
Terran历史背景
2020/03/14 星际争霸
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
javascript操作cookie的文章(设置,删除cookies)
2010/04/01 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
js获取和设置属性的方法
2014/02/20 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
js判断是否为空和typeof的用法(详解)
2016/10/07 Javascript
layui文件上传实现代码
2017/05/20 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
python with statement 进行文件操作指南
2014/08/22 Python
进一步了解Python中的XML 工具
2015/04/13 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
在django项目中导出数据到excel文件并实现下载的功能
2020/03/13 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
班主任班级寄语大全
2014/04/04 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
解除租房协议书
2014/12/03 职场文书
员工年终考核评语
2014/12/31 职场文书
毕业生评语大全
2015/01/04 职场文书
暂停营业通知
2015/04/25 职场文书
2016年父亲节寄语
2015/12/04 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
Mysql 用户权限管理实现
2021/05/25 MySQL
新手必备Python开发环境搭建教程
2021/05/28 Python
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android