zoukankan      html  css  js  c++  java
  • 写一个类似苹果的开关按钮

    由于项目需要写一个开关按钮,找了bootstrap,以及amaze UI框架上面的switch开关按钮,更改样式太复杂了,

    有很多问题,就干脆使用js写一个,

    效果如下:

    逻辑是点击二级圆点时背景色改变,圆点移动,而这2步只需要使用js来改变类控制;

    代码如下

    html:

    <body>
    <div id="div1" class="open1">
      <div id="div2" class="open2"></div>
    </div>
    </body>

    2个盒子嵌套

     

     

    css:

    <style>
    #div1{
    200px;
    height: 90px;
    border: 1px solid #808080;
    border-radius: 44px;
    position: relative;
    }
    #div2{
    86px;
    height: 86px;
    border-radius: 50%;

    position: absolute;
    }
    .open1{
      background-color: white;
    }
    .open2{
    left: 4px;
    top: 2px;
    }
    .close1{
      background-color: #a1ed2b;
    }
    .close2{
    right: 4px;
    top: 2px;
    }

    </style>

     

    JS点击圆点时,利用三目运算添加类改变样式

    <script>
      var div1=document.getElementById("div1");
      var div2=document.getElementById("div2");
      div2.onclick=function(){
        div1.className=(div1.className=="close1")?"open1":"close1";
        div2.className=(div2.className=="close2")?"open2":"close2";
      }
    </script>

  • 相关阅读:
    java学习——内部类、匿名内部类
    Java中接口之间的继承
    Settings
    POM
    Maven指令
    Maven生命周期
    内部类
    Modules
    Simple Maven Project
    Maven概述
  • 原文地址:https://www.cnblogs.com/luna666/p/8351261.html
Copyright © 2011-2022 走看看