登录框切换，JQ、js

雨点打透心脏的1/2处 2022-01-29 14:57 229阅读 0赞

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70 1][]

### js ###

$(document).ready(function() {
    				    /*这是一个自定义的函数,作用是设置class1类为隐藏,class2类显示*/
    				function showDiv(class1, class2) {
    					$(class1).css("display", "none");
    					$(class2).css("display", "block");
    				}
    				/*给图标设置点击事件*/
    				$('.app .top img').click(function() {
    					showDiv(".app", ".login");
    				})
    				$('.login .top .toggle').click(function() {
    					showDiv(".login", ".app");
    				})
    			})

###  css ###

#o-box-down {
    	padding: 0 0 0 40px;
    }
    .login-aside .top {
    	text-align: right;
    	height: 35px;
    	position: relative;
    	padding: 5px 5px 0 0;
    }
    
    .login-aside .app {
    	display: none;
    }
    
    .top img{
    	vertical-align: middle;
    }
    .top .toggle {
    	cursor: pointer;
    }
    
    .top .tip{
    	position: absolute;
    	height: 60%;
    	top: 10px;
    	right: 38px;
    	transition: right 1s;
    	-moz-transition: right 1s;
    	-webkit-transition: right 1s;
    }
    
    .top .tip:hover {
        right: 50px;
    }
    .qr{
    	text-align: center;
    	color: #9c9c9c;
    	font-size: 12px;
    	margin-top: 20px;
    	height: 55%;
    	width: 75%;
    }
    .pic{
    	background: url(../../img/login/saoyisao.jpg) 0 no-repeat;
    	padding: 10px 0 10px 40px;
    	color: #FF5722;
    	margin-top: 20px;
    }

### html ###

<div class="login-aside">
    				<div id="o-box-up"></div>
    				<div class="login">
    					<div class="top">
    						<img height="100%" src="../img/login/co.png" class="toggle" />
    						<img src="../img/login/tip.png" class="tip" />
    					</div>
    					<div id="o-box-down" style="table-layout:fixed;">
    						<div class="error-box"></div>
    						<form class="registerform" action="">
    							<div class="fm-item">
    								<label for="logonId" class="form-label">系统登录：</label>
    								<input type="text" value="输入账号" maxlength="18" name="accound" class="i-text" datatype="s4-18" errormsg="用户名至少6个字符,最多18个字符！"
    								 tip="输入账号" altercss="gray">
    								<div class="ui-form-explain"></div>
    							</div>
    
    							<div class="fm-item">
    								<label for="logonId" class="form-label">登录密码：</label>
    								<input type="password" value="" maxlength="100" name="pwd" class="i-text" datatype="*6-16" nullmsg="请设置密码！"
    								 errormsg="密码范围在6~16位之间！">
    								<div class="ui-form-explain"></div>
    							</div>
    
    							<div class="fm-item pos-r">
    								<label for="logonId" class="form-label">验证码</label>
    								<input type="text" value="" maxlength="100" name="code" class="i-text yzm" datatype="s4-4" nullmsg="请输入验证码！"
    								 errormsg="验证码必须为4个字符！" tip="输入验证码" altercss="gray">
    								<div class='codeimg' style="opacity: 1; right: -5px;top: -3px;">
    									<canvas class="J_codeimg" id="myCanvas" onclick="Code();">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
    								</div>
    								<div class="ui-form-explain"></div>
    							</div>
    
    							<div class="fm-item">
    								<label for="logonId" class="form-label"></label>
    								<input type="submit" value="登录" tabindex="4" id="send-btn" class="btn-login">
    								<div class="ui-form-explain"></div>
    							</div>
    
    						</form>
    
    					</div>
    				</div>
    				<div class="app">
    					<div class="top">
    						<img height="100%" style="cursor: pointer;" src="../img/login/pc.png" />
    					</div>
    					<div id="o-box-down" style="table-layout:fixed;">
    						<div style="height: 100%; width: 100%;">
    							<div style="color: #FFFFFF;">手机扫描下载APP客户端</div>
    							<div class="qr">
    								<img width="100%;" height="100%;" src="../img/IrfsApp.png" />
    							</div>
    							<div class="pic">扫一扫下载更便捷</div>
    						</div>
    					</div>
    				</div>
    			</div>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190522131327678.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW95YW5saTgwNzc_size_16_color_FFFFFF_t_70 1]: /images/20220129/dbf8546a029e43389c43fe62fd143cc2.png