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.0879.site-最新白菜博彩| www.382757.com-苏州福彩各网点| www.47ot.com-立彩佳代理-| www.cai508.com-快三平台网站| www.869485.com-教你七星彩的规律| 福彩www.15355x.com| www.72493.com-广东体彩网点查询| www.956525.com-合乐彩票app| www.75342.com-怎么买彩票会发财| www.126732.com-大众彩票网安全吗| www.fu22.com-bb快乐彩-| www.979976.com-福彩网站资讯搜索| www.306635.com-澳發彩票-| www.070821.com-彩礼是给谁的| www.191671.com-彩票走势图分几种| www.625893.com-彩票哪个app好| www.723938.com-快三线上第一平台| www.788.xyz-体育彩票复式怎么买| www.164667.com-有没有买彩票的群| www.609259.com-时时彩如何买龙虎和| www.698434.com-百彩网免费料263| www.cp5733.com-安徽福彩-| www.128749.com-福彩快三有几种玩法| 亚洲彩www.68568j.com| www.966620.com-腾讯五分彩是国彩吗| www.k78.net-立彩彩票追号计划| www.35276.com-如何追回黑彩输的钱| www.068777.com-充值36元买彩票| www.218333.com-彩票游戏是骗人的吗| www.987814.com-福利彩票29选七| www.c70.com-彩站专用电视走势图| www.724915.cc-彩赌-| www.150514.com-福彩快3二不同号| www.pp89.com-今日3d双彩图| www.8th.cc-天马彩票是正规的吗| www.67el.com-信博彩票是官方网吗| www.0653.com-福建体彩公主音乐网| www.660737.com-阿里彩票登陆| www.95pl.com-足彩胆-| www.633205.com-属马人能中彩吗| www.915577.com-竞彩258官方网站| www.620777.com-彩票世界官网| www.507761.com-彩票返奖率最高| www.03738.com-辽宁福彩中心在哪里| www.956797.com-小猪彩泥手工| www.11810.com-泰国彩票开奖| www.631292.com-足球彩票怎么算注数| www.043599.com-七星彩相关术语| www.506506.cc-m8彩票我的账户| www.3965.bid-东北女方结婚彩礼钱| www.021539.com-小店宝彩票正规吗| www.883545.com-快频彩票有哪些种类| www.977905.com-开彩票店赚钱| www.iy48.com-云发购快三-| www.30gm.com-中国竞彩网赛果| www.182558.com-福彩双色球走势图| www.5940.cc-易旺彩票可信吗| www.719132.com-周杰伦彩虹现场版| www.219571.com-黑龙江福彩快乐十分| www.444729.com-51彩票全天计划彩| www.686027.com-福彩票三地开奖| www.753579.com-qq彩色名称-| www.811999.com-166彩票下载安装| www.874124.com-体育彩票奖励规则| www.930429.com-海南七星彩梦册解码| www.984124.com-山东福彩网官方首页| www.wt.cc-彩票小狂人看胆| www.96yf.com-中国福利彩票通知| www.3786.vip-全天重庆时彩计划| www.2cj.com-今天彩票开奖信息| www.211424.com-福彩3d的玩法规则| www.326127.com-彩宝网网址-| www.869.net-怎样用彩铅画樱花树| www.5730.wang-公司彩票-| www.482977.com-599彩票iso-| www.687115.com-美国彩票巨奖| www.763461.com-彩票十选五开奖结果| www.848857.com-福彩生活即开型彩票| www.920303.com-彩之星下载专区| www.980784.com-附近卖福利彩票站| www.dc0.com-时时彩kk19| www.483089.com-金彩是什么-| www.309078.com-快三有多少几率中奖| www.2980.vip-开彩开奖现场直播| www.8595.loan-情人节买彩票| www.952476.com-彩票验奖app| 万利www.32123s.com| www.22cw.com-购彩票软件-| www.052187.com-彩票合买有平台吗| www.126764.com-彩铅画入门眼睛图片| www.189123.cc-一分快三开奖查询| www.813911.com-刘军教玩江苏快三| www.773964.com-九宫图算法彩票胆码| www.868223.com-七星彩43结果| www.936320.com-快三到晚上几点结束| www.987627.com-冀彩-| www.zw0.cc-浙江体彩6+1机选| www.522363.com-256cm彩票-| www.906721.com-福彩胆码-| www.996316.com-哪里可以买北单足彩| www.kc76.com-彩9彩票-| www.101092.com-快彩12技巧-| www.723858.com-合发彩票娱乐平台| www.322882.com-北京快三个位走势图| www.181081.com-正规的彩票软件| www.893484.com-乐彩网破解器| www.wo2.cc-福彩快三河北开奖| www.758832.com-彩票加盟代理找谁| www.fz42.com-福利彩票的发行者| www.4633.xyz-彩票店代销证| www.20089.com-浙江省福彩中心| www.562685.com-8g神话彩票网址| www.77138.com-彩票开奖推荐号码| www.44492.cc-彩色混凝土路面材料| www.721616.com-湖北快三网络版| www.800477.com-卓易彩票17年版本| www.876457.com-快三分分彩走势图| www.947461.com-网购福彩-| www.ha93.com-518彩票网正规吗| www.zz20.com-体彩标志中间尺寸| www.526065.com-福彩快三官方网| www.615234.com-彩票一群想不劳而获| www.897499.com-广东福利彩票玩法| www.967291.com-玖亿彩票计划qq群| www.as57.com-上海快三预测与推荐| www.341789.com-吉林彩票下载| www.535369.com-0到9的彩票是什么| www.033.win-竞彩篮球哪里看结果| www.061839.com-浙讧体彩6十1开奖| www.132383.com-网上买彩票什么软件| www.266537.com-河北十一选5爱彩| www.bp53.com-凤凰彩票提现失败| www.882205.com-彩90彩票-| www.980257.com-买彩票有没有必中的| www.bb9.cc-彩票大小单双技巧| www.ni44.com-竞彩分析网站| www.k19.biz-吉林快三大群| www.55uq.com-湖南体彩俱乐部| www.24233.cc-敬力七星彩奖表| www.004848.com-福彩33期开奖结果| www.376708.com-重号七星彩票| www.nc96.com-爱彩乐手机版下载| www.416.xyz-256彩票苹果| www.83766.cc-体彩机额度-| www.399028.com-彩票开票查询| www.555192.com-乐彩网静态版双色球| www.641188.com-快三方法-| www.135567.cc-开体育彩票店收益| www.210442.com-吉林快三害死我了| www.oi03.com-手机福彩投注| www.9734.cc-特彩吧最老版| www.65902.com-彩票模拟投注网站| www.099081.com-网赚彩票-| www.176605.com-福彩快三口诀表| www.54286.com-一张彩票多少钱| www.19mf.com-乐彩3500写真机| www.50fd.com-网上玩时彩压大就挂| www.733.com-600万彩票冒领| www.822149.com-体彩店兑奖有佣金| www.89863.cc-推店彩票是骗人的嘛| www.175660.com-福彩快三破解器| www.238033.com-体育彩票兑奖地点| www.311307.com-众赢彩票合法吗| www.552659.com-彩彩网8.5邀请码|