要实现这个功能的大致思路是:
1.首先要在页面上设置一个登录按钮,可以是<button><a><img>都行,我们点击这个元素的时候会弹出登录框:
2.其次在页面合适位置制作两个<div>,一个登录功能的div,另一个注册功能的div,注意位置的设置,当网站首次加载进入的时候登录框不可见,那就要把样式设置为display:"none"
3.当用户点击登录按钮的时候,通过JS设置登录div的display="",如何用户点击了登录界面上的注册按钮时,通过jQuery切换div透明和大小就可以完美实现登录注册的切换
4.关闭登录框的话也是同样的道理,把两个div的display设置为none就行
代码如下:
sign.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sign</title> <style> body { text-align: center; background-color: burlywood; } .signform { font-family: 微软雅黑; position: fixed; background-color: white; top: 20%; left: 30%; width: 500px; height: 400px; border-radius: 1em; text-align: center; z-index: 999; } #registerform { height: 450px; } .signclose { cursor: pointer; float: right; overflow: hidden; text-align: center; position: relative; height: 35px; width: 35px; margin-top: 10px; margin-right: 10px; } #registerloading{ position: absolute; width: 25px; height: 25px; left: 410px; top: 90px; } .signinput { text-align: center; border-radius: 0.2em; width: 280px; height: 45px; border: none; background-color:#f2f2f2; font-size: 28px; } .signinput::-webkit-input-placeholder { font-size: 26px; } .userdiv { position: relative; margin-top: 80px; } .pwddiv { position: relative; margin-top: 20px; } .postdiv { position: relative; margin-top: 20px; } .postdiv button { cursor: pointer; color: white; font-size: 26px; border: none; border-radius: 0.4em; width: 280px; height: 45px; background-color:#4CAF50; } </style> <link rel="stylesheet" href="./sign.css"> </head> <body> <div> <button id="displaysign" onclick="start()">点击登录</button> </div> <div class="signform" id="signform" style="display: none"> <div class="signclose"> <img src="image/signclose.ico" width="35px" height="35px" onclick="signclose()"> </div> <div class="userdiv"> <input id="user" class="signinput" type="text" placeholder="用户名" name="user" > </div> <div class="pwddiv"> <input id="pwd" class="signinput" type="password" placeholder="密码" name="pwd"> </div> <div class="postdiv"> <button>登录</button> </div> <br> <div class="change" style="color: #4d4d4d"> <p>还没有账号?赶快<a href="#" style="text-decoration: none;color: #43A047">注册</a>一个吧</p> </div> </div> <div class="signform" id="registerform" style="display: none"> <div class="signclose"> <img src="image/signclose.ico" width="35px" height="35px" onclick="signclose()"> </div> <div class="userdiv"> <input id="registeruser" class="signinput" onblur="loading()" type="text" placeholder="用户名" name="user"> </div> <img src="image/signloading.gif" style="display: none" id="registerloading"> <div class="pwddiv"> <input id="registerpwd" class="signinput" type="password" placeholder="密码" name="pwd"> </div> <div class="pwddiv"> <input id="registerrepwd" class="signinput" type="password" placeholder="再次输入密码" name="pwd"> </div> <div class="postdiv"> <button>注册</button> </div> <br> <div class="change" style="color: #4d4d4d"> <p>已有账号?立刻去<a href="#" style="text-decoration: none;color: #43A047">登录</a>吧</p> </div> </div> </body> <script src="./jquery-3.2.1.min.js"></script> <script src="./signformchange.js"></script> </html>
sign.css
/* * @Author: xshis * @Date: 2018-05-23 11:45:25 * @Last Modified by: xshis * @Last Modified time: 2018-05-23 11:45:28 */ body { text-align: center; background-color: burlywood; } #displaysign{ position: relative; top: 80px; width: 70px; height: 40px; } .signform { font-family: 微软雅黑; position: fixed; background-color: white; top: 20%; left: 30%; width: 500px; height: 400px; border-radius: 1em; text-align: center; z-index: 999; } #registerform { height: 450px; } .signclose { cursor: pointer; float: right; overflow: hidden; text-align: center; position: relative; height: 35px; width: 35px; margin-top: 10px; margin-right: 10px; } #registerloading{ position: absolute; width: 25px; height: 25px; left: 410px; top: 90px; } .signinput { text-align: center; border-radius: 0.2em; width: 280px; height: 45px; border: none; background-color:#f2f2f2; font-size: 28px; } .signinput::-webkit-input-placeholder { font-size: 26px; } .userdiv { position: relative; margin-top: 80px; } .pwddiv { position: relative; margin-top: 20px; } .postdiv { position: relative; margin-top: 20px; } .postdiv button { cursor: pointer; color: white; font-size: 26px; border: none; border-radius: 0.4em; width: 280px; height: 45px; background-color:#4CAF50; }
signformchange.js
/* * @Author: xshis * @Date: 2018-05-23 11:45:50 * @Last Modified by: xshis * @Last Modified time: 2018-05-23 11:45:52 */ $(function () { $('.change a').click(function () { $('.signform').animate({height: 'toggle', opacity: 'toggle'}, 'slow'); }); }) function start() { document.getElementById('signform').style.display="" } function signclose() { document.getElementById('signform').style.display="none" document.getElementById('registerform').style.display="none" } function loading() { document.getElementById('registerloading').style.display="" }
需要自己引入juqery库,就可以跑起来了
本文转载至:https://www.cnblogs.com/liujianhuaIT/p/6256261.html