弹出式登录界面 23-11-14 10:01 4695 12558 blog.csdn.net 要实现这个功能的大致思路是: 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"。版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。如有侵权,请联系我们删除。 复制链接
要实现这个功能的大致思路是: 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
评论记录:
回复评论: