QQ客服
當前位置 : 中国福彩快乐十分开奖分布图 > 代碼 > 網頁特效 > 表單代碼 > jQuery掃碼/手機號碼登錄框切換代碼

双色球十期开奖分布图: VIP商用 jQuery掃碼/手機號碼登錄框切換代碼

jQuery大氣通用的登錄框切換頁面,微信掃碼,賬戶密碼,手機號碼三種切換登錄功能。支持一鍵qq登錄,微信登錄,微博登錄功能等。這是一款非常實用的多功能登錄框切換代碼。
分享到微信朋友圈
X
[聲明]該素材是本站付費買斷的作品代碼,享受著作權?;?,未經允許請勿轉載,否則追究相應的法律責任。

使用方法:

1、head引入css文件

<link href="css/style.css" rel="stylesheet" type="text/css" />

2、head引入js文件

<script type="text/javascript" src="js/jquery.min.js"></script>

3、body引入HTML代碼

<div class="aui-register-popup">
	<div class="aui-register-box">
		<div class="aui-register-link">
			<a href="javascript:;" class="fl">返回首頁</a>
			<a href="javascript:;" class="fr">已有賬號?去登錄</a>
		</div>
		<div class="aui-register-logo">
			<img src="images/logo.png" alt="">
		</div>
		<div class="aui-register-form" id="verifyCheck">
			<div class="register-wrap" id="register-wrap">
				<div class="register" id="register">
					<div class="register-top" id="reg-top">
						<h2 class="normal" id="normal">普通登錄</h2>
						<h2 class="nopassword" id="nopw">手機無密碼登錄</h2>
						<a id="qrcode" href="#">
							<span class="aui-tag-size">掃碼登錄</span>
						</a>
					</div>
					<!--賬戶密碼登錄-->
					<div class="register-con" id="rc">
						<div class="aui-register-form-item">
							<input type="text" name="username" maxlength="20"  placeholder="賬戶名" class="txt03 f-r3 required" tabindex="3" data-valid="isNonEmpty||between:3-20||isUname" data-error="<i class='icon-tips'></i>您還沒有輸入賬戶名||<i class='icon-tips'></i>用戶名長度3-20位||<i class='icon-tips'></i>只能輸入字母、數字、且以中文或字母開頭" id="adminNo">
							<label class="focus valid"></label>
						</div>
						<div class="aui-register-form-item">
							<input type="password" name="password" placeholder="密碼" id="password" maxlength="20" class="txt04 f-r3 required" tabindex="4" style="ime-mode:disabled;" onpaste="return  false" autocomplete="off" data-valid="isNonEmpty||between:6-20||level:2" data-error="<i class='icon-tips'></i>密碼太短,最少6位||<i class='icon-tips'></i>密碼長度6-20位||<i class='icon-tips'></i>密碼太簡單,有被盜風險,建議字母+數字的組合">
							<label class="focus valid"></label>

						</div>
						<div class="aui-register-form-item">
							<p class="aui-for-pwd">
								<a class="" href="#">忘記密碼</a>
							</p>
							<input id="aui-btn-reg" class="aui-btn-reg" placeholder=""  readonly="readonly" value="登錄" >
						</div>
						<div class="aui-protocol">
							登錄即同意
							<a  href="#">《17素材網使用協議》</a>&
							<a  href="#">《隱私權條款》</a>
						</div>
						<div class="aui-thirds">
							<a href="#">
								<i class="aui-qq-img"></i>
								<i>QQ登錄</i>
							</a>
							<a href="#">
								<i class="aui-wx-img"></i>
								<i>微信登錄</i>
							</a>
							<a href="#">
								<i class="aui-wb-img"></i>
								<i>微博登錄</i>
							</a>
							<div class="clear"></div>
						</div>
					</div>

					<!--手機動態碼登錄-->
					<div class="login-con" id="lc">
						<div class="aui-register-form-item">
							<input type="text" name="phone" placeholder="手機號碼" class="txt01 f-r3 required" keycodes="tel" tabindex="1" data-valid="isNonEmpty||isPhone" data-error="<i class='icon-tips'></i>請輸入手機號||<i class='icon-tips'></i>手機號碼格式不正確" maxlength="11" id="phone">
							<label class="focus valid"><div class="msg" style="display:none"><i class='icon-tips'></i>您還未輸入手機號</div></label>
							<span class="aui-get-code btn btn-gray f-r3 f-ml5 f-size13" id="time_box" disabled style="display:none;"></span>
							<span class="aui-get-code btn btn-gray f-r3 f-ml5 f-size13" id="verifyYz" >獲取動態碼</span>
						</div>
						<div class="aui-register-form-item">
							<input type="text" placeholder="動態碼" maxlength="6" id="verifyNo" class="txt02 f-r3 f-fl required" tabindex="2" data-valid="isNonEmpty||isInt" data-error="<i class='icon-tips'></i>請填寫正確的手機動態碼||<i class='icon-tips'></i>請填寫6位手機動態碼">
							<label class="focus valid"></label>
						</div>
						<div class="aui-register-form-item">
							<input id="aui-btn-reg1" class="aui-btn-reg" placeholder=""  readonly="readonly" value="登錄" >
						</div>
						<div class="aui-protocol">
							登錄即同意
							<a  href="#">《17素材網使用協議》</a>&
							<a  href="#">《隱私權條款》</a>
						</div>
						<div class="aui-thirds">
							<a href="#">
								<i class="aui-qq-img"></i>
								<i>QQ登錄</i>
							</a>
							<a href="#">
								<i class="aui-wx-img"></i>
								<i>微信登錄</i>
							</a>
							<a href="#">
								<i class="aui-wb-img"></i>
								<i>微博登錄</i>
							</a>
							<div class="clear"></div>
						</div>
					</div>


					<!-- 掃碼登錄 -->
					<div class="saoma" id="sm">
						<div class="screen-tu" id="screen">
							<span class="aui-tag-size">密碼登錄</span>
						</div>
						<div class="aui-text-item">
							<h1>1秒即登錄,方便又安全</h1>
						</div>
						<div class="qr-code">
							<span class="tips_img"></span>
							<img src="images/code.png" alt="">
						</div>
						<div class="aui-tab-footer">
							<p>17掃碼登錄,同步賬戶信息 | <a href="#">下載17APP</a></p>
						</div>

					</div>
				</div>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="aui-register-bottom">
			<a>?188.com</a>
			<a href="#">聯系客服</a>
			<a href="#">幫助中心</a>
			<div class="clear"></div>
		</div>
	</div>
</div>


<script type="text/javascript" src="js/login.js"></script>
<script type="text/javascript">
$(function() {
	$("#aui-btn-reg").click(function() {
		if (!verifyCheck._click()) return;
		alert('恭喜你!登錄成功')

	});
	$("#aui-btn-reg1").click(function() {
		if (!verifyCheck._click()) return;
		alert('恭喜你!登錄成功')

	});
});
</script>
[聲明]本站素材來自用戶分享,僅限學習交流請勿用于商業用途。如損害你的權益請聯系客服QQ:2447402004給予處理。
舉報×
舉報原因:

相關代碼

二維碼
意見反饋
×
×

注冊

QQ注冊 立即下載 中国福彩快乐十分开奖分布图

簽到成功!

已連續簽到1天,簽到3天將獲得積分VIP1天

知道了