登录框切换，JQ、js

效果

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>