【JS】写一个简洁的滑块登录注册页面

登录注册界面无论在任何开发项目还是作品中都是基本要写的一块环节，本次利用原生CSS和JS来实现能在一个页面内互相跳转的滑块登陆注册页面。

最终实现效果如下图：

 

HTML形式比较简单，container容器包裹登录、注册两个表单，其中除了input输入框种类不同其余基本相同。代码如下：

<div class="container">

    <!-- 注册 -->

    <div class="form-box register-box">

      <form action="#" class="form">

        <h2 class="tit">注册</h2>

        <input type="text" placeholder="输入你的姓名" class="input">

        <input type="tel" placeholder="输入你的电话" class="input">

        <input type="password" placeholder="输入你的密码" class="input">

        <button class="btn">注册</button>

        <a class="link" id="loginBtn">登录</a>

      </form>

    </div>

 

    <!-- 登录 -->

    <div class="form-box login-box">

      <form action="#" class="form">

        <h2 class="tit">登录</h2>

        <input type="tel" placeholder="输入你的电话" class="input">

        <input type="password" placeholder="输入你的密码" class="input">

        <button class="btn">登录</button>

        <a class="link" id="registerBtn">注册</a>

      </form>

    </div>

 

实现滑动切换登陆注册关键的样式有

.form-box{

/* 实现登陆注册动画切换 */

transition:all 0.6s ease-in-out

}　　

 

/* 隐藏注册模块 */

.container.on .login-box{

 transform: translate(-100%);

}

 

   <script>

      let loginBtn = document.getElementById("loginBtn");

      let registerBtn = document.getElementById("registerBtn")

      let container = document.querySelector(".container");

　　　　// 返回第一个查找到的container类对象，能兼容IE8以下

      loginBtn.addEventListener("click",()=>{

        container.classList.remove("on");

      });

      registerBtn.addEventListener("click",()=>{

        container.classList.add("on");

      });

  </script>

完整CSS样式如下：

 html {

      font-size: 16px;

      width: 100%;

      height: 100%;

    }

    body {

      background: rgb(93, 185, 255);

      background-size: cover;

      display: grid;

      height: 100%;

      overflow: hidden;

      /* 盒子水平垂直居中简写，前提是grid或flexbox布局 */

      place-items: center;

    }

    .tit {

      font-weight: 300;

      margin: 0;

      margin-bottom: 1.25rem;

    }

    .link {

      color: #333;

      font-size: 0.9rem;

      margin: 1.5rem 0;

      text-decoration: none;

      cursor: pointer;

    }

    .container {

      background: #fff;

      border-radius: 0.7rem;

      /* （box-shadow5个属性分别为：1.X轴偏移2.Y轴偏移 3.模糊半径 4.阴影拓展 5.阴影类型 顺序不能换） */

      box-shadow: 0 9px 17px rgba(0, 0, 0, 0.25), 0 7px 7px rgba(0, 0, 0, 0.25);

      width: 320px;

      height: 420px;

      position: relative;

      overflow: hidden;

    }

    /* 隐藏注册模块 */

    .container.on .login-box{

      transform: translate(-100%);

    }

    .form-box {

      width: 100%;

      height: 100%;

      position: absolute;

      top: 0;

      left: 0;

      /* 实现登陆注册动画切换 */

      transition:all 0.6s ease-in-out

    }

    .btn {

      background: #07c160;

      border: none;

      color: #fff;

      cursor: pointer;

      font-size: 1rem;

      padding: 0.6rem 3rem;

      font-weight: bold;

      margin-top: 1.5rem;

      border-radius: 0.5rem;

      transition: transform 80ms ease-in;

    }

    .btn:active {

      transform: scale(0.9);

    }

    .form {

      width: 100%;

      height: 100%;

      background: #fff;

      display: flex;

      align-items: center;

      justify-content: center;

      flex-direction: column;

      padding: 0 3rem;

      box-sizing: border-box;

    }

    .input {

      border: none;

      background: #f5f5f5;

      margin: 0.5rem 0;

      padding: 0.9rem;

      width: 100%;

    }

最终可实现滑块切换登陆注册