tianzyc 2020-06-13
html:
<body> <div class="login-wrap"> <div class="box-login"> <div class="login-form"> <dt class="login-tab"> <span class="actived">手机动态码登录</span> <span>账号密码登录</span> </dt> <dd> <p class="login-phone"> <i></i> <input type="text" placeholder="请输入手机号码"> </p> <p class="login-code clearfix"> <i></i> <input type="text" placeholder="验证码"> <em> <a href="">获取验证码</a> </em> </p> </dd> <dd class="hide"> <p class="login-account"> <i></i> <input type="text" placeholder="请输入登录账号"> </p> <p class="login-pass clearfix"> <i></i> <input id="login-pass" type="password" placeholder="密码"> <i class="eyes-icon close"></i> </p> </dd> <div class="login-item clearfix"> <label for="loginAuto" class="fl"> <input type="checkbox" checked="true">自动登录 </label> <a href="" class="fr register">免费注册</a> <a href="" class="fr">忘记密码</a> </div> <a href="">登录</a> </div> <div class="login-third"> <dt> <span>第三方登录方式</span> </dt> <dd> <div class="third-link"> <i></i><a href="">微信</a> <i></i><a href="">QQ</a> <i></i><a href="">微博</a> </div> <p> 我已阅读并接受 <a href="">《房产在线服务协议》</a>及 <a href="">《隐私权政策》</a> </p> </dd> </div> </div> </div> </body>
css:
.login-wrap { position: relative; height: 706px; margin-top: 100px; background: url("../../images/login_bg.jpg") no-repeat center center; } .box-login { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 450px; height: 400px; box-shadow: 0 0 6px 2px rgba(0,0,0,0.23); background-color: #fff; z-index: 999; } .box-login>.login-form{ min-height: 240px; padding: 30px 35px 20px 35px; } .box-login>.login-form>.login-tab { text-align: center; } .box-login>.login-form>.login-tab span { font-size: 16px; padding: 12px; font-weight: bold; } .box-login>.login-form>.login-tab span.actived { color: #1da838; } .box-login>.login-form dd p { width: 380px; height: 40px; background-color: #f0f0f0; margin-top: 20px; border-radius: 2px; } .box-login>.login-form dd p input { border: 0; width: 80%; height: 40px; background-color: #f0f0f0; } .box-login>.login-form dd .login-code input{ width: 180px; } .box-login>.login-form dd .login-code em { float: right; width: 123px; height: 40px; line-height: 40px; text-align: center; background-color: #fff; } .box-login>.login-form dd .login-code em a { display: block; width: 110px; height: 38px; margin-left: 10px; color: #fff; background-color: #1da838; } .box-login>.login-form>a:hover, .box-login>.login-form dd .login-code em a:hover { background-color: #14922d; } .box-login>.login-form .login-item { height: 35px; line-height: 35px; margin: 10px 0; } .box-login>.login-form .login-item .register{ color: #1da838; padding-left: 10px; } .box-login>.login-form .login-item a:hover { color: #666; } .box-login>.login-form .login-item input[type=checkbox]{ vertical-align: -1px; } .box-login>.login-form>a{ display: block; width: 380px; height: 40px; line-height: 40px; text-align: center; background-color: #1da838; color: #fff; border-radius: 2px; } /*第三方登录*/ .box-login>.login-third { font-size: 12px; text-align: center; padding: 10px 35px 25px 35px; color: #666; } .box-login>.login-third dt { border-top: 1px solid #e6e6e6; } .box-login>.login-third dt span{ display: block; width: 120px; margin: 0 auto; font-size: 12px; background-color: #fff; color: #999; margin-top: -10px; } .box-login>.login-third dd p, .box-login>.login-third dd .third-link { margin: 10px 0; } .box-login>.login-third dd p a { color: #6B91B3; } .box-login>.login-third dd .third-link a{ margin: 0 5px; color: #666; } .box-login>.login-third dd a:hover { color: #DF2F2F; } /*登录icon*/ .box-login>.login-form>dd>p>i{ float: left; width: 20px; height: 20px; margin: 10px 10px; } .box-login>.login-form .login-pass { position: relative; } .box-login>.login-form .login-pass .eyes-icon { position: absolute; right: 5px; top: 0; width: 20px; height: 20px; margin: 10px 10px; } .box-login>.login-form .login-pass .eyes-icon.close{ background: url("../../images/login_sprites.png") -10px -50px; } .box-login>.login-form .login-pass .eyes-icon.open{ background: url("../../images/login_sprites.png") -50px -50px; } .box-login>.login-form .login-phone i { background: url("../../images/login_sprites.png") -10px -90px; } .box-login>.login-form .login-code i { background: url("../../images/login_sprites.png") -50px -10px; } .box-login>.login-form .login-account i { background: url("../../images/login_sprites.png") -90px -50px; } .box-login>.login-form .login-pass>i { background: url("../../images/login_sprites.png") -90px -10px; }
js:
$(document).ready(function () { $(‘.login-form .login-tab span‘).each(function (index) { $(this).click(function () { $(‘.hide‘).removeClass(‘hide‘) $(‘.actived‘).removeClass(‘actived‘) $(‘.login-form dd‘).eq(index-1).addClass(‘hide‘) $(this).addClass(‘actived‘) }) }) $(‘.eyes-icon‘).click(function() { var _this = $(this) //获取同级兄弟input当前的密码框 var _input=_this.siblings(‘#login-pass‘); if (_this.hasClass(‘close‘)){ _this.removeClass(‘close‘) _this.addClass(‘open‘) _input.attr(‘type‘, ‘text‘) } else { _this.removeClass(‘open‘) _this.addClass(‘close‘) _input.attr(‘type‘, ‘password‘) } }) })