QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 表单代码 > jQuery扫码/手机号码登录框切换代码

原创商用 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天

知道了
百盈PK10 www.536176.com-给几组彩票号码| www.657193.com-辛运彩app-| www.019353.com-彩票中奖者故事| www.9165.biz-新加坡六福彩| www.100279.com-网销彩票-| www.254763.com-好彩投官网下载| www.256672.com-彩经网杀号定胆| www.396279.com-彩虹的图片大全| www.87955.com-福彩跟单什么意思| www.061025.com-彩票俱乐部怎么赚钱| www.137295.com-贵阳省福彩中心| www.504520.com-演出前彩排还是彩台| www.74im.com-经纬时时彩平台网址| www.c30.me-k彩、彩民福地| www.85co.com-赢彩网站谁建的| www.768441.com-一分快三最高倍率| www.00092.com-包装纸箱彩色设计| www.hk40.com-易彩票怎么赚钱| www.8726.loan-六号彩-| www.77579.cc-体彩福彩的开奖结果| www.066578.com-篮球彩票软件推荐| www.881937.com-试玩赚佣金彩票| www.34144.com-彩吧网3d图迷总汇| www.066670.com-金信誉博彩app| www.305117.com-中国福利彩票35期| www.408955.com-七星彩能网上买吗| www.597369.com-壹号平台彩票官网| www.688038.com-足球竞彩让球| www.fq6.cc-福利彩票彩种下载| www.956906.com-hk百彩网-| www.qj25.com-好彩一八猜什么生肖| www.62lc.com-双色球彩票开时间| 乐发彩票www.112779.com| www.654082.com-赢彩彩票与同行| www.861265.com-福州江苏快三| 天朝彩票www.71789.cc| www.8412.pw-头头彩票下载安装| www.61680.com-大胜彩票234| www.953703.com-我国正规彩票有哪些| www.kp8.cc-彩票开奖双色球直播| www.019306.com-铜仁福彩中心| www.r51.cn-如何用时间战胜彩票| www.799499.com-时时彩彩票aqq| www.874733.com-彩吧全图3d图谜| www.950230.com-百宝彩陕西11选五| 爱彩www.001ac.com| www.c75.in-彩经网彩票工具下载| www.797168.com-浙江省福彩12选5| www.00654.cc-乐彩3d字谜图谜| www.ap16.com-贵州彩票最大奖| www.751011.com-中福彩票赛车| www.uj91.com-內蒙古福彩-| www.99kb.cc-3d杀尾杀跨凤彩网| www.2319.win-彩票兑奖法律法规| www.19761.com-巴西三分彩是假的吗| www.2203.top-彩票自适应源码| www.27993.cc-小鹿彩票app下载| www.654525.com-易彩堂合不合法| www.936957.com-神彩福牛双色球官网| www.np9.com-好彩36选7-| www.361007.com-玩彩彩票安卓版| www.179720.com-河北快三开奖助手| www.254217.com-中国体彩爱乐彩| www.318244.com-网络十字彩-| www.378823.com-体育彩票19035| www.089042.com-98彩票登录平台| www.355643.com-体彩贪1800亿| www.wk25.com-中彩娱乐登录| www.822197.com-爱博彩票67768| www.966021.com-福彩快3组合遗漏| www.tz70.com-体彩基础知识| www.56gc.com-手机买顶呱刮彩票| www.412460.com-大乐透是什么彩票| www.667175.com-5百彩票app-| www.826139.com-两元彩票图片| www.9zl.cc-七彩祥云来娶我图片| www.1321.vip-彩票106网页版| www.95440.com-优秀彩票业主演讲稿| www.560740.com-环彩网网页版| www.085266.com-彩票果果的彩票专栏| www.318263.com-创意水彩画-| www.aj7.cc-快三胆拖怎么中奖| www.126.cm-中国福彩正规平台| www.355470.com-甘肃三彩凤首壶| www.6381.org-胜负彩软件-| www.808614.com-彩票工资车论坛| www.982653.com-福彩3d输惨了| www.tj88.cc-亚洲5分彩-| www.34wj.com-七星彩开奖号码35| www.081073.com-福彩3d概率-| www.754434.com-体彩福彩彩经下载| www.856789.com-快三变成20分钟| www.908038.com-网上彩票的骗局揭秘| www.975306.com-汇彩网骗局揭秘| 彩客网www.782478.com| www.ia28.com-安徽福彩领取| www.xw03.com-ios正规彩票软件| www.831296.com-福彩七乐彩如何中奖| www.919249.com-七星彩内部资料直码| www.984307.com-淘彩票网的骗局揭秘| www.cp3329.com-福利彩票一分快三| www.nr66.com-京东彩票诈骗| www.i42.net-赢家彩票app| www.09447.com-山东福彩app下载| www.53113.com-昆明七彩酒店| www.234252.com-彩票没玩-| www.334567.cc-提现正常的彩票网站| www.444546.cc-家彩网乐彩论坛杀码| www.535000.cc-电玩彩票机怎么玩| www.614860.com-3a彩票下载-| www.678548.com-成都体彩中心地址| www.746397.com-555彩票官方网站| www.069859.com-正神彩票app下载| www.126135.com-手机购买彩票合法吗| www.275175.com-北京分分彩真的假的| www.fv1.com-不怕挂时时彩方案| www.753269.com-中彩吧合法吗| www.625021.com-苏宁彩票快3| www.788438.com-七星彩专家推荐号| www.970920.com-鲨鱼影视迷彩兔| www.nj14.com-中国竞彩网竞彩篮球| www.as2.com-快三赌博大小单双| www.900913.com-玩彩的天才独胆| www.gq18.com-彩色纸箱包装| www.630.cm-香港5分彩开奖| www.1224.win-微彩是赌博吗| www.58753.com-福彩积分卡在哪买| www.071120.com-河南周口结婚彩礼| www.271201.com-彩店二维码-| www.466666.com-七乐彩销售到几点| www.595328.com-彩票外挂作弊软件| www.731142.com-竞彩足球即时开奖| www.933874.com-彩70app苹果版| www.iw95.com-江苏体彩e球彩比分| www.32eg.com-彩票今晚开什么奖| www.011674.com-关于彩票的相关知识| www.238166.com-内蒙福利彩票快3| www.341801.com-三门理论和彩票分析| www.198824.com-皇都彩票真假问题| www.142918.com-新快三大小单双骗局| www.055791.com-天津快三怎么玩| www.194.cm-三地天天彩报| www.38jx.com-马家窑彩陶王| 500彩票www.500713.com| www.12fl.com-作弊重庆时时彩| www.681292.com-辽宁福彩中心| www.100065.cc-彩票周周签到| www.119558.com-经典彩票店标语| www.856151.com-500足球竞彩网| www.530160.com-二月八日彩票出什么| www.627537.com-江苏体彩下载软件| www.709051.com-七天彩票是真的假的| www.781474.com-皇冠彩票-| www.889933.com-博彩程序源码| www.555686.com-顶尖彩票兼职靠谱吗| www.652608.com-手机澳彩官网| www.730863.com-中国快三邀请码| www.793310.com-购乐彩票app下载| www.884757.com-重庆时时彩开奖公告| www.949084.com-传统彩灯制作| www.xu64.com-体彩多乐彩漏| www.3569.cc-送彩金电子游艺| www.46657.com-加拿大五分彩是正规| www.635149.com-七彩音符日记|