zoukankan      html  css  js  c++  java
  • 开关灯 单选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    .btn-toggle{
         100px;
        height: 30px;
        position: relative;
        border-radius: 20px;
        background-color: #6699cc;
        float: right;
    }
    
     .btn-checkbox{
        position: absolute;
        left:-4px;
        top:-3px;
         100%;
        height: 100%;
        z-index: 10;
        opacity: 0;
        cursor: pointer;
    }
    
    .btn-style{
        position: absolute;
        z-index: 9;
        height: 26px;
         45px;
        background-color: #fff;
        border-radius: 20px;
        transition: .35s cubic-bezier(0.785, 0.135, 0.150, 0.860);
        transition-property: all;
        left:2px;
        top:2px;
    }
    
    
    .btn-toggle .btn-checkbox:checked + .btn-style{
        left:53px;
    }
    
    .btn-sex{
        position: absolute;
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        color: #fff;
    
    }
    
     .btn-toggle .left{
        padding-left: 20px; 
    }
    
    
     .btn-toggle .right{
        padding-left: 65px;
    }
    
    </style>
    </head>
    
    <body>
    
    <div class="btn-toggle">
        <input type="checkbox" class="btn-checkbox" checked="checked">
        <div class="btn-style"></div>
        <div class="btn-sex left"></div>
    </div>
    </body>
    <script type="text/javascript" src="补货页面/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    /***********性别按钮特效**************/
        $(function () {
            var onOff = true;
            $('.btn-toggle').on('click',function(){
                var oToggle = $(this);
                var oSex = oToggle.children('.btn-sex');
    
                if(onOff){
                    oToggle.css("background-color","#ccc");
                    oSex.text('').removeClass('left').addClass('right');
                    onOff = false;
                }else {
                    oToggle.css("background-color","#6699cc");
                    oSex.text('').removeClass('right').addClass('left');
                    onOff = true;
                }
    
            });
        })
    </script>
    </html>
  • 相关阅读:
    在ts+vue中实现前端批量下载打包二维码
    常用到的MD5加密
    Permission denied Command PhaseScriptExecution failed with a nonzero exit code
    iOS App 内购 Demo
    App 上架遇到的坑
    基于StreamingKit的音频播放器
    iOS 添加多图片加签名
    xcode10 自定义代码块
    xcode10 之后代码不联想
    Mac 开发PHP 使用ThinkPHP
  • 原文地址:https://www.cnblogs.com/jinsuo/p/6090224.html
Copyright © 2011-2022 走看看