最新新出的设计稿，设计要求登录注册找回密码不设置单独页面 直接弹窗出来 且切换效果要旋转来 以为不容易 没想到做着感觉还阔以 哈哈
现在贴出来
这是两个按钮，样式按照自己的来写就行
<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');
});
命名可能不规范，勿喷，有需要的拿走
- 还没有人评论，欢迎说说您的想法！
客服
