实现登录注册滑块效果（美观丝滑实用）

最新推荐文章于 2024-07-11 17:28:05 发布

黑帽子X

最新推荐文章于 2024-07-11 17:28:05 发布

阅读量494

点赞数 9

分类专栏：前端文章标签： css jquery 前端

本文链接：https://blog.csdn.net/weixin_52872685/article/details/134831177

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

先看效果：

两个form表单均加入了表单验证

html+css+jquery实现

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="../cssFile/logincss.css">
    <title>Document</title>
</head>
<body>
    <div class="dibox">
        <!-- 有账号了模块 -->
        <div class="you">
            <p>已经有账号了吗？</p>
            <button id="left">登录</button>
        </div>
        <!-- 无账号模块 -->
        <div class="wu">
            <p>还没注册账号吗？</p>
            <button id="right">注册</button>
        </div>
    
        <!-- 滑块 -->
        <div class="huakuai">
            <!-- 登录板块 -->
            <form action="" method="post" class="denglu">
                <input type="text" name="username" required id="yonghu" placeholder="用户名">
                <input type="password" name="password" required id="mima" placeholder="密码" pattern="^[0-9A-Za-z]{8,20}$">
                <input type="submit" name="" id="deng" value="登录">
            </form>
            <!-- 注册板块 -->
            <form action="" method="post" class="zhuce">
                <input type="text" name="user" required id="user" placeholder="请输入大小写和数字6~16位用户名" pattern="^[0-9A-Za-z]{6,16}$">
                <input type="text" name="phone" required id="phone" placeholder="手机号" pattern="^1\d{10}$">
                <input type="email" name="email" required id="email" placeholder="邮箱" pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
                <input type="password" name="zhumima" required id="zhumima" placeholder="请输入8~20位密码" pattern="^[0-9A-Za-z]{8,20}$">
                <input type="number" name="" required id="yanzheng"  placeholder="验证"><span id="yantext"></span><br>
                <input type="submit" name="" disabled id="zhu" value="注册">
                <input type="reset" value="重置">
            </form>
        </div>
    </div>
</body>
<script src="../jsFile/loginjs.js"></script>
</html>

css代码（11行你可以引用自己的图片作为滑块背景）：

body{
    text-align: center;
    background-color: rgb(61, 61, 61);
}
.dibox{
    width: 700px;
    height: 350px;
    background-color: rgb(173, 85, 255);
    margin: auto;
    margin-top: calc(15%);
    background-image: url();
    position: relative;
}
.you{
    width: 200px;
    height: 150px;
    top: 100px;
    left: 75px;
    text-align: center;
    position: absolute;
}
.you p{
    margin-top: 20%;
    font-size: 20px;
    color: rgb(92, 92, 92);
    font-weight: 900;
}
.you button{
    width: 90px;
    height: 40px;
    border: 2px solid white;
    background: none;
    font-size: 18px;
    color: rgb(75, 75, 75);
    font-weight: 900;
}
.wu{
    width: 200px;
    height: 150px;
    top: 100px;
    right: 75px;
    text-align: center;
    position: absolute;
}
.wu p{
    margin-top: 20%;
    font-size: 20px;
    color: rgb(92, 92, 92);
    font-weight: 900;
}
.wu button{
    width: 90px;
    height: 40px;
    border: 2px solid white;
    background: none;
    font-size: 18px;
    color: rgb(75, 75, 75);
    font-weight: 900;
}
.huakuai{
    width: 300px;
    height: 420px;
    background-color: rgb(255, 255, 255);
    z-index: 3;
    top: -35px;
    left: 25px;
    position: absolute;
}
.denglu{
    width: 80%;
    height: 300px;
    text-align: center;
    margin: auto;
    overflow: hidden;
    margin-top: 45%;
    display: block;
}
.denglu input{
    width: 90%;
    height: 30px;
    margin: 8px 0;
    padding-left: 8px;
}
.denglu input:last-child{
    width: 30%;
}

.zhuce{
    width: 80%;
    height: 300px;
    text-align: center;
    margin: auto;
    overflow: hidden;
    margin-top: 18%;
    display: none;
}
.zhuce input{
    width: 90%;
    height: 30px;
    margin: 8px 0;
    padding-left: 8px;
}
.zhuce input:nth-of-type(6),.zhuce input:nth-of-type(7){
    width: 30%;
}
.zhuce input:nth-of-type(5){
    width: 55%;
}
#yantext{
    padding-left: 10px;
}
.sucess{
    margin: auto;
    width: 150px;
    height: 40px;
    line-height: 40px;
    background-color: rgb(255, 0, 242);
    margin-top: 30px;
    color: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: 900;
    border-radius: 20px;
    opacity: 0;
    animation: identifier 2s linear;
}
@keyframes identifier {
    0%{opacity: 0;}
    50%{opacity: 100%;}
    100%{opacity: 0;}
}

js代码：

$(function(){
    $("#left").click(function(){
        var hua = $(".huakuai");
        hua.animate({
            left:'-=350px'
        });
        $(".denglu").css("display","block");
        $(".zhuce").css("display","none");
    });
    $("#right").click(function(){
        var hua = $(".huakuai");
        hua.animate({
            left:'+=350px'
        });
        $(".denglu").css("display","none");
        $(".zhuce").css("display","block");
        $("#yonghu").val("");
        $("#mima").val("");
    });
    var zong;
    // 获得验证时，获取验证信息
    $("#yanzheng").focus(function(){
        var one = Math.floor(Math.random()*20);
        var two = Math.floor(Math.random()*20);
        zong = parseInt(one) + parseInt(two);
        $("#yantext").html(one + "+" + two);
    });

    $("#yanzheng").blur(function(){
        if($("#yanzheng").val() == zong){
            $("#zhu").removeAttr("disabled");
        }
    });
})