旋转卡 可以用做登录注册

最新新出的设计稿，设计要求登录注册找回密码不设置单独页面  直接弹窗出来 且切换效果要旋转来  以为不容易   没想到做着感觉还阔以  哈哈 

现在贴出来  

这是两个按钮，样式按照自己的来写就行

<a class="loginEnter" id="loginEnter" href="javascript:;">登录</a>|
<a class="loginEnter" id="registerEnter" href="javascript:;">注册</a>

这里是弹出的html  我简化了  只留了做切换的按钮  none的样式就是dispaly:none;

<div id="loginregBox" class="none">
        <div id="loginBox" class="none">
            <h2 class="loginregTitle">登录</h2>
                    <a class="rotateBtn" id="forgetPassword">忘记密码？</a>                   
                    <p class="bottomCon">还没有账号吗？ <a id="goRegisterBox" class="gotoBtn">立即注册>></a></p>
            </div>
        </div>
        <div id="registerBox" class="none">
            <h2 class="loginregTitle">注册</h2>
            <div class="formBox">
                  <p class="bottomCon">已有账号 <a class="gotoBtn goLoginBox">马上登录>></a></p>
            </div>
        </div>

　　div id="ForgetPassword" class="none">
            <h2 class="loginregTitle">找回密码</h2>
            <div class="formBox">             
                    <p class="bottomCon"><a class="gotoBtn goLoginBox">又想起来了>></a></p>
                </form>
            </div>
        </div>

</div>

 

下面就到了关键的时刻   js部分

这是封装的

function loginregister(showdiv,hidediv1,hidediv2){
        $('#loginregBox').css({"transformStyle":"preserve-3d","-webkitTransform":"rotateY(90deg)", "-webkitTransition":"all 0.6s"});
        setTimeout(function(){
            $(showdiv).show();
            $(hidediv1).hide();
            $(hidediv2).hide();
            $(showdiv).css({'transform':'rotateY(180deg)','display':'block'});
        },700);
        setTimeout(function(){
            $('#loginregBox').css({"transformStyle":"preserve-3d","-webkitTransform":"rotateY(180deg)", "-webkitTransition":"all 0.6s"});
        },800);
    };


    //注册   
    $('#goRegisterBox').click(function(){
        loginregister('#registerBox','#loginBox','#ForgetPassword');           
    });
    // 登录  &&  想起密码
    $('.goLoginBox').click(function(){
        loginregister('#loginBox','#registerBox','#ForgetPassword');
    });

    // 忘记密码
    $('#forgetPassword').click(function(){
        loginregister('#ForgetPassword','#registerBox','#loginBox');
    });

命名可能不规范，勿喷，有需要的拿走

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有