在login界面使用js完成简单的登陆与注册表单切换动画

jiu违

已于 2023-07-08 15:09:56 修改

阅读量228

点赞数 2

文章标签： javascript css3 html5

于 2023-07-07 22:51:14 首次发布

本文链接：https://blog.csdn.net/jiuwei_z/article/details/131605609

版权

下拉图片右上角的注册实现表单切换！

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .box {
                height: 100vh;
                background: linear-gradient(to top right, #FFDAB9, #FFFAFA, #FFFAFA);
            }

            .loginSubject {
                display: flex;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                width: 700px;
                height: 350px;
                border-radius: 5px;
                box-shadow: 10px 10px 15px -10px;
            }

            .rightLogin,
            .rightRigister {
                border-radius: 10px;
                position: relative;
                height: 71.5%;
                border-radius: 3px;
                padding: 50px 10px;
                background: linear-gradient(to top right, #FFFAFA, #FFDAB9, #FF6347);
                display: flex;
                flex-direction: column;
                transition: all 0.5s 0s;
            }

            .leftImg img {
                border-radius: 5px;
                width: 100%;
                height: 100%;
            }
            input {
                color: #ff856f;
                border-radius: 5px;
                text-indent: 10px;
                height: 30px;
                font-size: 12px;
                border: none;
                margin-bottom: 20px;
                margin-right: 20px;
                outline: none;
                width: 200px;
            }
            .rightLogin>button,
            .rightRigister>button {
                width: 150px;
                height: 25px;
                font-size: 10px;
                border: none;
                border-radius: 5px;
                margin: 0 auto;
                margin-top: 80px;
                background: #fffafa;
                 transition: all 0.5s;
            }
            .rightLogin>button:hover,
            .rightRigister>button:hover {
                background-color: #ffbd9d;
                cursor: pointer;
                width: 180px;
                height: 30px;
                color: #FFFAFA;
            }

            .loginSpan {
                letter-spacing: 2px;
                color: #75757e;
                font-size: 15px;
                position: absolute;
                top: 10px;
            }

            button::after {
                display: inline-block;
                content: '';
                top: 0;
                border: 1px solid #ffede0;
                position: absolute;
                height: 30px;
                right: 30px;
                background-color: red;
            }

            .register {
                user-select: none;
                border-radius: 2px;
                position: absolute;
                display: block;
                font-size: 10px;
                width: 40px;
                text-align: center;
                height: 20px;
                line-height: 20px;
                right: 10px;
                top: 15px;
                cursor: pointer;
                color: #ff6a4e;
                background-color: #ffeee2;
            }

            .loginform {
                overflow: hidden;
            }
        </style>

        <script>
            let x = 0;
            let y = 0;
            let l = 0;
            let t = 0;
            let isDown = false;
            window.addEventListener('load', function() {
                let register = document.querySelectorAll('.register');
                let rightLogin = document.querySelector('.rightLogin');
                let rightRigister = document.querySelector('.rightRigister');
                for (let i = 0; i < register.length; i++) {
                    register[i].onmousedown = function(e) {
                        y = e.clientY;
                        t = register[i].offsetTop;
                        isDown = true;
                    }
                }
                for (let i = 0; i < register.length; i++) {
                    register[i].onmousemove = function(e) {
                        if (isDown == false) {
                            return;
                        }
                        let ny = e.clientY;
                        let nt = ny - (y - t);
                        if (nt <= 25) {
                            register[i].style.top = nt + 'px';
                            setTimeout(function() {
                                if (i == 1) {
                                    rightLogin.style.marginTop = 0 + '%';
                                    rightRigister.style.marginTop = 0 + '%';
                                } else {
                                    rightLogin.style.marginTop = -320 + '%';
                                    rightRigister.style.marginTop = 160 + '%';
                                }
                            }, 1000)
                        }
                        if (nt <= 15) {
                            register[i].style.top = t + 'px';
                        }
                    }
                }
                document.onmouseup = function() {
                    for (let i = 0; i < register.length; i++) {
                        register[i].style.top = 15 + 'px';
                        isDown = false;
                    }
                }
            })
        </script>
    </head>
    <body>
        <div class="box">
            <div class="loginSubject">
                <div class="leftImg">
                    <img src="./img/u=1732966997,2981886582&fm=193&f=GIF.jpg" alt="">
                </div>
                <form action="" class="loginform">
                    <div class="rightRigister">
                        <span class="loginSpan">欢迎注册</span>
                        <input type="text" placeholder="输入账号">
                        <input type="text" placeholder="输入密码">
                        <input type="text" placeholder="输入短信验证">
                        <button type="submit">注册</button>
                        <span class="register"  title="下拉">登录</span>
                    </div>
                    <div class="rightLogin">
                        <span class="loginSpan">欢迎登录</span>
                        <input type="text" placeholder="输入账号">
                        <input type="text" placeholder="输入密码">
                        <input type="text" placeholder="输入短信验证">
                        <button type="submit">登录</button>
                        <span class="register" title="下拉">注册</span>
                    </div>

                </form>
            </div>
        </div>

    </body>
</html>

创作不易，点个赞再走吧，哈哈哈