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天

知道了
旺彩彩票 www.326616.cc-七星彩十专家预测| www.30ez.com-手机购彩哪个网站好| www.dt23.com-街机快三游戏下载| www.76670.com-体彩排列三太湖钓翁| www.688613.com-下载105彩票| www.874175.com-网易彩票验证失败| www.404478.com-小白兔彩铅画| www.4482.vip-腾讯分分彩中奖规则| www.706599.com-时时彩论坛绝学技巧| www.207602.com-大财神彩票app| www.357587.com-合伙买彩票的协议| www.535929.com-八位数彩票怎么买| www.735679.com-互联网彩票开售了吗| www.911367.com-公益福彩骗局| 500彩票网www.355805.com| www.492020.com-3d黑彩中奖倍率| www.587052.com-上海福彩4d-| www.670602.com-七彩色头发-| www.751019.com-中福彩票手机下载| www.842933.com-公益彩票二十一选一| www.912179.com-卖私彩抓到怎么判刑| www.996670.com-爱彩乐11选五| www.mm34.com-天津时时彩最快开奖| www.13zk.com-海南体彩飞鱼中奖率| www.51oz.com-彩旗是谁-| 500彩票网www.97655i.com| www.xy84.com-下一个贵州快三| www.22731.com-江苏快三手机投注| www.74487.com-中国足彩网彩票官网| www.089162.com-48彩开奖结果| www.67fn.com-快三分分彩漏洞| www.71422.com-有人加qq玩福彩| www.970726.com-彩票没中奖安慰句子| www.506857.com-新梦想彩票-| www.lt33.com-时时彩全天计划蜂巢| www.52757.com-好彩麻将-| www.395052.com-彩虹app授权系统| www.578389.com-濮阳体彩中心电话| www.780484.com-快三注数-| www.171755.com-江西快三实时开奖| www.320161.com-湖北快三百宝彩| 天天中彩票www.822138.com| www.gx93.com-百盈彩票是黑平台吗| www.620709.com-香港马彩网站| www.841009.com-彩妆店加盟排行| www.9no.com-如何购体育彩票| www.85799.cc-凤凰彩票有哪些网址| www.853206.com-金富彩票可靠吗| 金彩www.983jc.com| www.xq44.com-买彩票怎么选号6| www.721153.com-官方一号彩票| www.864665.com-558彩票下载| www.981609.com-体彩p62-| www.q09.site-菲律宾正规彩票| www.1903.cn-qq分分彩投注| www.061135.com-欢乐彩直播-| www.432051.com-彩票行家香港| www.657393.com-成都摩宝网络彩票| www.t21.online-i8彩票代理-| www.732233.com-濮阳县结婚彩礼| www.799709.com-天天彩票送彩金| www.868721.com-海南7星彩预测| www.941916.com-彩神帝邀请码| www.41qi.com-皇彩票下载安装| www.va21.com-49彩票下载安装| www.15br.com-关于彩票的对联| www.096.bid-彩16平台安全吗| www.2845.xyz-福利彩票3d速查表| www.8299.com-福彩体彩排5走势| www.24277.com-彩铅画古风人物图片| www.1221.blue-49彩网-| www.141344.com-凤彩字谜-| www.220905.com-斗牛彩票-| www.37287.cc-新星彩免费资料| www.350908.com-彩票能买那些数| www.463768.com-河南七星彩-| www.567456.com-彩虹五号无人机售价| www.649286.com-和彩国际官网| www.318742.com-时时彩遗漏统计数据| www.329223.com-彩票注册送的平台| www.510638.com-彩虹屁夸人大全| www.63618.com-唯彩看球cba直播| www.432422.com-135cc彩票下载| www.957578.com-北京福利彩票有哪些| www.82pl.com-体彩7星彩开奖规律| www.37498.com-凤翔彩票app| 众乐彩票www.239544.com| www.67117.com-安阳彩民-| www.504405.com-微信盘彩票二维码| www.608371.com-中国福利彩票71期| www.684100.com-中国福彩3d吧| www.895127.com-免费彩票合买软件| www.954752.com-788彩钢瓦-| www.996958.com-11选五江苏爱乐彩| www.su1.cc-河南省快三走势图一| www.633603.com-虹彩检测被收购| www.703278.com-265彩票网站| www.776074.com-在时时彩输了怎么办| www.838458.com-手机买快三能赢吗| www.893936.com-幸运彩票助手软件| www.952051.com-500彩票网与彩神| www.996872.com-七星彩开奖机选| www.ro7.com-彩票吸引话术| 快彩www.81678i.com| www.98778.cc-竞彩怎样投注最科学| www.8273.xyz-全球彩票-| www.2ye.com-上海时时乐开奖彩| www.564196.com-加盟机器人福利彩票| www.654252.com-南昌福利彩归那里管| www.767083.com-三d正版藏机图福彩| www.19xg.com-分分彩通杀两码方法| www.01716.com-彩金游戏-| www.75078.com-体育彩票星期几开奖| www.209144.com-体彩5d开奖查询| www.372757.com-福彩票单式中奖| www.510013.com-彩彩霸高手论坛| www.646372.com-双色球中奖彩民故事| www.713629.com-王者彩票快三破解| www.806782.com-大型彩票网站| www.883090.com-我被男友骗了买彩票| www.969615.com-福利彩票谁中过大奖| 凤凰Vwww.www.fh7557.com| www.198992.com-福彩开-| www.49399.cc-极速时时彩骗局| www.99048.com-时时彩推广手段| www.109234.com-百彩网网址大全| www.06ke.com-黑彩怎么量刑| www.209792.com-赢彩吧大发快3网址| www.896073.com-万豪彩票苹果版| www.452811.com-米多竞彩-| www.34579.cc-福彩上海天天选四| www.838394.com-千万彩票得主死亡| www.136478.com-彩票资质-| www.269705.com-7072彩票-| www.553447.com-足彩二串一技巧| www.828267.com-点点彩票下载| www.6zy.com-酷彩吧客服-| www.8233.com-足彩今日强胆推荐| www.n28.cn-京彩江苏快三正规吗| www.79tu.com-彩库触屏版-| www.xf23.com-中华彩票网主页| www.xg21.com-澳门永利博彩靠谱吗| www.2212.in-体彩蓝齐儿断组| www.65123.com-竞彩独家-| www.013627.com-玩五分彩有规律么| www.777127.com-百盛彩票靠谱不| www.23491.com-祥云瑞彩什么意思| www.395291.com-彩虹岛手游官网盛大| www.32237.com-彩票开奖时间查询| www.568338.cc-微彩论坛排列五| www.732993.com-淮安市福彩中心| www.969251.com-快三追号计划利润表| www.023870.com-内蒙快三彩工推荐号| www.120158.com-体彩打票机键盘图片| www.821012.com-3d彩圣-| www.30027.com-体彩折线走势图| www.36ng.com-福彩机选一注号码| www.26805.com-香港快三网址| www.32nk.com-福彩组六七码遗漏| www.004327.com-福彩3d开奖835| www.087177.com-五福彩票能拿到钱吗| www.757187.cc-彩色混凝土路面报价| www.878923.cc-澳客体彩网-| www.956216.com-玩彩票有赢钱的吗|