仿美团手机版登录页tab切换效果

转载 (原文地址) x537196 随笔 随手写 3004阅读 2014-08-21 12:04:16 举报

美团美团登录页
这个貌似对火狐支持不好(可能是给移动端用的原因),同学让我给他做一个类似的,所以就做了下,我不是专业前端,做的不好,请指正,3Q
代码片段 1

代码:
[code]<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>登录tab切换</title>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>;
<style>

body{margin:0;padding:0}
/*banner*/
.banner{width:100%;height:60px;background:#2dbeae;position:fixed;text-align:center;color:#fff;line-height:60px;font-size:20px;}
/*tab面板*/
.ipanel{position:relative;top:60px;width:100%;height:260px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
/*显示位置*/
.showpanel{width:300px;height:92%;position:absolute;top:0;left:50%;margin:10px 0 10px -150px;border:1px solid #ccc;background:#fff;border-radius:5px;z-index:2;overflow:hidden;}
/*标签头部*/
.tab{width:100%;height:50px;border-radius:10px 10px 0  0;position:absolute;left:0;top:0;text-align:center;line-height:50px;color:#666;z-index:1;}
.logintab,.regtab{width:50%;height:50px;float:left;cursor:pointer;}
.tabbg{width:50%;height:50px;left:50%;background:rgba(204,204,204,.5);position:absolute;z-index:-1;border-width:0 0 1px 1px;border-style:solid;border-color:#aaa;border-radius:0 3px 0 0;}
/*表单部分*/
.tabform{width:200%;height:188px;position:absolute;left:0;top:50px;z-index:1;}
.regform,.loginform{width:50%;height:188px;float:left;text-align:center;}
.user,.code,.phonecode{width:90%;height:40px;background:#f7f7f7;border:1px solid #ccc;border-radius:3px;color:#888;font-size:18px;text-indent:5px;}

.phonereg{width:100%;text-align:center;height:60px;margin-top:15px;}
.phone{width:60%;height:40px;background:#f7f7f7;border:1px solid #ccc;border-radius:3px;color:#888;font-size:18px;text-indent:5px;margin-top:1px;}
.randcode{height:60px;}
/*按钮*/
.sendbtn{height:43px;width:28%;background:#52B3CC;border:1px solid #4596AB;color:#fff;border-radius:3px;margin-left:3px;box-shadow:0 0 3px #ccc,0 2px 0 rgba(255,255,255,.3) inset;cursor:pointer;}
.loginbtn,.regbtn{width:90%;height:40px;background:#A6C04C;border-radius:3px;border:1px solid #91A351;color:#fff;font-size:20px;cursor:pointer;box-shadow:0 0 3px #ccc,0 2px 0 rgba(255,255,255,.3) inset;}
input:hover{border:1px solid #66FF00;}
input:focus{border:1px solid #09f;box-shadow:0 0 1px #09f;}

</style>
</head>

<body>
<div class="banner">标签页切换效果</div>
<!--tab面板-->
<div class="ipanel">
<!--显示区域-->
<div class="showpanel">
<!--tab头-->
<div class="tab">
<div class="logintab " id="curr">登录</div>
<div class="regtab" id="">注册</div>
</div>
<div class="tabbg"></div>
<!--表单-->
<div class="tabform">
<div class="loginform">
<p><input type="text" placeholder="用户名" name="username" class="user" /></p>
<p><input type="password" placeholder="密码" name="password" class="code" /></p>
<button class="loginbtn">登录</button>
</div>
<div class="regform">
<div class="phonereg">
<input type="text" name="phone" class="phone" placeholder="请输入手机号码" />
<input type="button" class="sendbtn" value="发送验证码" />
</div>
<div class="randcode">
<input type="text" name="phonecode" class="phonecode" placeholder="请输入手机验证码"/>
</div>
<button class="regbtn">注册</button>
</div>
</div>
</div>
</div>

</body>

<script>
function init(){
//切换 到注册页
$(".regtab").click(function(){
if($(this).attr("id") !='curr'){
//移动表单部分
$(".tabform").animate({left:'-100%'},500,function(){
$(".regtab").attr("id","curr");
$(".logintab").removeAttr("id");
});
//移动标签头背景
$(".tabbg").animate({left:'0'},500,function(){
$(this).css({ "border-width":"0 1px 1px 0","border-radius":"3px 0 0 0"});
});
}

});
//切换到登录页
$(".logintab").click(function(){
    if($(this).attr("id") !='curr'){
        $(".tabform").animate({left:'0'},500,function(){
            $(".logintab").attr("id","curr");
            $(".regtab").removeAttr("id");  
        });
            $(".tabbg").animate({left:'50%'},500,function(){
            $(this).css({ "border-width":"0 0 1px 1px","border-radius":"0 3px 0 0"});
        });
    }
});

}
$(function(){
init();
});
</script>
</html>[/code]

评论 ( 3 )
最新评论