要实现这个功能的大致思路是：
1.首先要在页面上设置一个登录按钮，可以是
2.其次在页面合适位置制作两个
，一个登录功能的div,另一个注册功能的div，注意位置的设置，当网站首次加载进入的时候登录框不可见，那就要把样式设置为display:"none"
3.当用户点击登录按钮的时候，通过JS设置登录div的display=""，如何用户点击了登录界面上的注册按钮时，通过jQuery切换div透明和大小就可以完美实现登录注册的切换
4.关闭登录框的话也是同样的道理，把两个div的display设置为none就行
代码如下：
sign.html
- html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>signtitle>
- <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" οnclick="start()">点击登录button>
- div>
- <div class="signform" id="signform" style="display: none">
- <div class="signclose">
- <img src="image/signclose.ico" width="35px" height="35px" οnclick="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" οnclick="signclose()">
- div>
- <div class="userdiv">
- <input id="registeruser" class="signinput" οnblur="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
注：本文转载自blog.csdn.net的weixin_42266757的文章"https://blog.csdn.net/weixin_42266757/article/details/80417976"。版权归原作者所有，此博客不拥有其著作权，亦不承担相应法律责任。如有侵权，请联系我们删除。
评论记录：
回复评论：