炫酷登錄注冊界面【超級簡單 jQuery+JS+HTML+CSS實現】

                        一:源碼獲取

                        這兩天根據需求寫了一個比較好看的有動態效果的登錄注冊切換頁面,這里我將源碼資源分享給大家,大家可以直接免費下載使用哦,沒有 vip 的小伙伴找我私聊發送"登錄注冊"即可我給你發文件,此登錄注冊框放在任何管理系統都是非常炫酷的點睛之筆!

                        一款非常炫酷登錄注冊頁面-Javascript文檔類資源-CSDN下載一個非常炫酷的的登錄注冊頁面,登錄注冊切換由jQuery實現,原理簡單易懂并且十幾行代碼就完成了更多下載資源、學習資料請訪問CSDN下載頻道.https://download.csdn.net/download/weixin_52212950/85799335

                        二:效果展示

                        登錄頁面:?

                        ?注冊頁面:

                        動態切換效果:切換時采用了一種滑動切換的效果


                        三:實現代碼:

                        此效果動態的實現原理也是非常簡單的,使用 jQuery 封裝好的動畫函數即可,以下是其功能實現的js代碼,使用了 jQuery 封裝好的 animate 動畫函數,在點擊切換注冊或登錄框時就會調用 animate,其內部回調函數內容為其登錄和注冊框哪個顯示哪個不顯示,從而完成一種視覺上的切換效果,其實歸根到底還是 display 的顯隱切換,有 jQuery 基礎 小伙伴就不難理解。

                        • 在這里在帶領大家復習一下 animate 動畫函數
                        • animate?(?params?,?speed?,??easing?,??fn?)???????params?為必寫參數?!!!
                        參數paramsspeedeasingfn
                        含義寫想要更改的樣式屬性,以對象形式傳遞,必寫速度參數,可寫為 slow,nomarl, fast,也可以寫成特定的毫秒數值用來指定特定的過度效果,默認為 swing,可換為 linear回調函數,在動畫執行完后調用動畫函數內的內容
                        • 注意以對象形式傳入要改變的屬性,并且設置動畫函數的必須是元素,不能是文檔,例如讓整個頁面移動時,不能給?$(document)?設置動畫函數,而應該給?$('html')?設置動畫函數,這點很重要!!!!!!!!!!
                        document.addEventListener('DOMContentLoaded',function(event){
                            document.addEventListener('selectstart',function(event){
                                event.preventDefault();
                            })
                            document.addEventListener('contextmenu',function(event){
                                event.preventDefault();
                            })
                            var random_box=document.querySelector('.random');
                            var btn=document.querySelector('.reset');
                            var wirte=document.querySelector('.write');
                            function random(min,max){
                                 return Math.floor(Math.random()*(max-min+1))+min;
                            }
                            btn.addEventListener('click',function(){
                                btn.style.backgroundColor='#fff';
                                window.setTimeout(function(event){
                                    btn.style.backgroundColor='rgb(255, 224, 146)';
                                },50)
                                var randoms=random(1000,9999);
                                console.log(randoms);
                                random_box.innerHTML=randoms;
                            })
                        })
                        $(function(){
                              $('.change-register-button').on('click',function(){
                                    $('.login').animate(
                                        {
                                            'left':'240px'
                                        },400,function(){
                                            $('.login').css({'display':'none',
                                                                  'left':'60px'})
                                            $('.change-register-box').css('display','none')
                                            $('.register').css('display','block')
                                            $('.change-login-box').css('display','block')
                                        }
                                    )
                              })
                              $('.change-login-button').on('click',function(){
                                $('.register').animate(
                                    {
                                        'right':'240px'
                                    },400,function(){
                                        $('.register').css({'display':'none',
                                                                    'right':'60px'})
                                        $('.change-login-box').css('display','none')
                                        $('.login').css('display','block')
                                        $('.change-register-box').css('display','block')
                                    }
                                )
                          })
                        })

                        四:完整代碼

                        HTML 代碼:

                        <!DOCTYPE html>
                        <html lang="en">
                        <head>
                            <meta charset="UTF-8">
                            <meta http-equiv="X-UA-Compatible" content="IE=edge">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>login</title>
                            <link rel="stylesheet" href="./login.css">
                            <script src="./jQuery.js"></script>
                            <script src="./login.js"></script>
                        </head>
                        <body>
                             <div class="background">
                        <!-- 登錄 -->
                                    <div class="login">
                                          <p class="login-value">LOG IN</p>
                                          <form action="">
                                                 <input type="text" class="login-num" placeholder="請輸入賬號">
                                                 <input type="password" class="login-pwd" placeholder="請輸入密碼">
                                                 <input type="button" value="忘記密碼?" class="forget">
                                                 <input type="submit" value="登錄" class="login-button">
                                          </form>
                                    </div>
                                    <div class="change-register-box">
                                       <p class="a">還沒有賬戶?</p>
                                       <p class="b">點擊加入我們吧</p>
                                         <button class="change-register-button">SIGN UP &nbsp;></button>
                                    </div>
                        <!-- 注冊 -->
                                    <div class="register">
                                       <p class="signup-value">SIGN UP</p>
                                       <button class="reset">重新獲取</button>
                                       <form action="">
                                              <input type="text" class="signup-num" placeholder="請輸入賬號">
                                              <input type="password" class="signup-pwd" placeholder="請輸入密碼">
                                              <input type="password" class="signup-repwd" placeholder="再次輸入確認密碼">
                                              <div class="random">????</div>
                                              <input type="text" class="write" placeholder="請輸入驗證碼">
                                              <input type="submit" value="注冊" class="signup-button">
                                       </form>
                                   </div>
                                   <div class="change-login-box">
                                         <p class="c">歡迎加入</p>
                                         <p class="d">快去登陸看看吧</p>
                                         <button class="change-login-button"><&nbsp; LOG IN</button>
                                   </div>
                             </div>
                        </body>
                        </html>

                        CSS代碼:

                        body{
                            background: url(./img/src=http___pic1.win4000.com_wallpaper_2020-10-12_5f83b7c13d0b9.jpg&refer=http___pic1.win4000.webp);
                            background-size: 110% ,110%;
                        }
                        .background{
                             width: 900px;
                             height: 400px;
                             position: absolute;
                             left: 50%;
                             top: 50%;
                             transform: translate(-50%,-50%);
                             background-color: rgba(10, 10, 10, 0.598);
                        }
                        /* 登錄框 */
                        .login{
                            position: absolute;
                            top: -12%;
                            left: 60px;
                            width: 600px;
                            height: 500px;
                            background-color: rgb(249, 249, 249);
                            z-index: 10;
                            box-shadow: 0 0 12px 0.6px rgb(106, 106, 106);
                            /* display: none; */
                        }
                        .login-value{
                            width: 600px;
                            font-size: 40px;
                            font-weight: bold;
                            color: rgb(255, 108, 108);
                            padding-left: 60px;
                            margin-top: 90px;
                        }
                        .login-num{
                            width: 485px;
                            height: 50px;
                            outline: none;
                            margin-top: -5px;
                            margin-left: 60px;
                            box-sizing: border-box;
                            border-top: none;
                            border-left: none;
                            border-right: none;
                            border-bottom: 2px solid rgb(182, 182, 182);
                            background-color: transparent;
                            font-size: 20px;
                            color: grey;
                        }
                        .login-pwd{
                            width: 485px;
                            height: 50px;
                            outline: none;
                            margin-top: 30px;
                            margin-left: 60px;
                            box-sizing: border-box;
                            border-top: none;
                            border-left: none;
                            border-right: none;
                            border-bottom: 2px solid rgb(182, 182, 182);
                            background-color: transparent;
                            font-size: 20px;
                            color: grey;
                        }
                        .forget{
                            position: absolute;
                            bottom: 90px;
                            left: 60px;
                             width: 220px;
                             height: 60px;
                             border: 1.5px solid rgb(151, 151, 151);
                             background-color:transparent;
                             font-size: 18px ;
                             font-weight: bold;
                             letter-spacing: 2px;
                             color: rgb(113, 113, 113);
                        }
                        .forget:hover{
                            background-color: rgb(235, 235, 235);
                        }
                        .login-button{
                            position: absolute;
                            bottom: 90px;
                            right: 60px;
                             width: 220px;
                             height: 60px;
                             border: none;
                             background-color:  rgb(222, 59, 59);;
                             font-size: 20px ;
                             font-weight: bold;
                             letter-spacing: 10px;
                             color: rgb(255, 255, 255);
                             text-shadow: 1px 1px 1px rgb(138, 138, 138);
                        }
                        .login-button:hover{
                            background-color: rgb(199, 38, 38);
                        }
                        /* 切換注冊框的盒子 */
                        .change-register-box{
                            position: absolute;
                            right: 0px;
                            width: 240px;
                            height: 400px;
                            background-color: transparent;
                            /* display: none; */
                        }
                        .a{
                            position: absolute;
                            top: 90px;
                            left: 62px;
                            font-size: 18px;
                            font-weight: bold;
                            color: rgba(255, 255, 255, 0.846);
                            letter-spacing: 2px;
                        }
                        .b{
                            position: absolute;
                            top: 140px;
                            left: 46px;
                            font-size: 18px;
                            font-weight: bold;
                            color: rgba(255, 255, 255, 0.858);
                            letter-spacing: 2px;
                        }
                        .change-register-button{
                              position: absolute;
                              left: 46px;
                              bottom: 120px;
                              width: 140px;
                              height: 50px;
                              border: 1.5px solid #fff;
                              background-color: transparent;
                              letter-spacing: 2px;
                              color: #fff;
                              font-size: 16px;
                              font-weight: bold;
                              border-radius: 5px;
                        }
                        .change-register-button:hover{
                            border: 1.5px solid rgb(217, 217, 217);
                            color: rgb(217, 217, 217);
                        }
                        /* 注冊框 */
                        .register{
                            position: absolute;
                            top: -12%;
                            right: 60px;
                            width: 600px;
                            height: 500px;
                            background-color: rgb(249, 249, 249);
                            display: none;
                            z-index: 10;
                            box-shadow: 0 0 12px 0.6px rgb(106, 106, 106);
                        }
                        
                        .change-login-box{
                            position: absolute;
                            left: 0;
                            width: 240px;
                            height: 400px;
                            background-color: transparent;
                            display: none;
                        }
                        .signup-value{
                            width: 600px;
                            font-size: 40px;
                            font-weight: bold;
                            color: rgb(255, 108, 108);
                            padding-left: 40px;
                            margin-top: 30px;
                        }
                        .signup-num{
                            width: 485px;
                            height: 50px;
                            outline: none;
                            margin-top: -18px;
                            margin-left: 60px;
                            box-sizing: border-box;
                            border-top: none;
                            border-left: none;
                            border-right: none;
                            border-bottom: 2px solid rgb(182, 182, 182);
                            background-color: transparent;
                            font-size: 20px;
                            color: grey;
                        }
                        .signup-pwd{
                            width: 485px;
                            height: 50px;
                            outline: none;
                            margin-top: 15px;
                            margin-left: 60px;
                            box-sizing: border-box;
                            border-top: none;
                            border-left: none;
                            border-right: none;
                            border-bottom: 2px solid rgb(182, 182, 182);
                            background-color: transparent;
                            font-size: 20px;
                            color: grey;
                        }
                        .signup-repwd{
                            width: 485px;
                            height: 50px;
                            outline: none;
                            margin-top: 15px;
                            margin-left: 60px;
                            box-sizing: border-box;
                            border-top: none;
                            border-left: none;
                            border-right: none;
                            border-bottom: 2px solid rgb(182, 182, 182);
                            background-color: transparent;
                            font-size: 20px;
                            color: grey;
                        }
                        .random{
                            position: absolute;
                            top: 305px;
                            left: 60px;
                            width: 110px;
                            height: 47px;
                            border: 1px solid black;
                            line-height :47px; 
                            text-align: center;
                            font-size: 27px;
                            font-weight: bold;
                            letter-spacing: 3px;
                            background-color: rgb(221, 246, 255);
                            color: grey;
                        }
                        .reset{
                            position: absolute;
                            top: 305px;
                            left: 186px;
                            width: 150px;
                            height: 47px;
                            border: 1px solid black;
                            line-height :47px; 
                            text-align: center;
                            font-size: 16px;
                            font-weight:600;
                            letter-spacing: 3px;
                            background-color: rgb(255, 224, 146);
                            border-radius: 6px;
                            color: rgb(92, 92, 92);
                            /* text-shadow: 2px 1px 1px grey; */
                        }
                        .write{
                            position: absolute;
                            top: 305px;
                             right: 58px;
                            width: 180px;
                            height: 47px;
                            border: 1px solid black;
                            outline: none;
                            font-size: 22px;
                            padding-left: 10px;
                        }
                        .signup-button{
                            position: absolute;
                            bottom: 50px;
                            right: 60px;
                             width: 482px;
                             height: 60px;
                             border: none;
                             background-color:  rgb(222, 59, 59);;
                             font-size: 20px ;
                             font-weight: bold;
                             letter-spacing: 15px;
                             color: rgb(255, 255, 255);
                             text-shadow: 1px 1px 1px rgb(138, 138, 138);
                        }
                        .signup-button:hover{
                            background-color: rgb(199, 38, 38);
                        }
                        .c{
                            position: absolute;
                            top: 90px;
                            left: 79px;
                            font-size: 18px;
                            font-weight: bold;
                            color: rgba(255, 255, 255, 0.846);
                            letter-spacing: 2px;
                        }
                        .d{
                            position: absolute;
                            top: 140px;
                            left: 46px;
                            font-size: 18px;
                            font-weight: bold;
                            color: rgba(255, 255, 255, 0.858);
                            letter-spacing: 2px;
                        }
                        .change-login-button{
                              position: absolute;
                              left: 46px;
                              bottom: 120px;
                              width: 140px;
                              height: 50px;
                              border: 1.5px solid #fff;
                              background-color: transparent;
                              letter-spacing: 2px;
                              color: #fff;
                              font-size: 16px;
                              font-weight: bold;
                              border-radius: 5px;
                        }
                        .change-login-button:hover{
                            border: 1.5px solid rgb(217, 217, 217);
                            color: rgb(217, 217, 217);
                        }

                        創作不易,你的支持就是我最大的動力!

                        評論 108 您還未登錄,請先 登錄 后發表或查看評論

                        “相關推薦”對你有幫助么?

                        • 非常沒幫助
                        • 沒幫助
                        • 一般
                        • 有幫助
                        • 非常有幫助
                        提交
                        ??2022 CSDN 皮膚主題:深藍海洋 設計師:CSDN官方博客 返回首頁

                        打賞作者

                        卡卡西最近怎么樣

                        你的鼓勵將是我創作的最大動力

                        ¥2 ¥4 ¥6 ¥10 ¥20
                        輸入1-500的整數
                        余額支付 (余額:-- )
                        掃碼支付
                        掃碼支付:¥2
                        獲取中
                        掃碼支付

                        您的余額不足,請更換掃碼支付或充值

                        打賞作者

                        實付
                        使用余額支付
                        點擊重新獲取
                        掃碼支付
                        錢包余額 0

                        抵扣說明:

                        1.余額是錢包充值的虛擬貨幣,按照1:1的比例進行支付金額的抵扣。
                        2.余額無法直接購買下載,可以購買VIP、C幣套餐、付費專欄及課程。

                        余額充值
                        久久悠悠精品综合网