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.301682.com-个体彩字迷-| www.218527.com-玩易彩有什么诀窍| www.308309.com-一分快三倍投技巧| www.62617.cc-全民竞彩彩票电脑版| www.31mr.com-256时时彩安卓版| www.834.tv-直播间聊彩票| www.068835.com-福建快三玩法| 500彩票网www.896010.com| www.316871.com-福彩宣传图片| www.464601.com-福彩3d形态图| www.110245.com-乐点彩神-| www.797954.com-体彩11选择5秘密| www.926535.com-五福彩票网5f12| www.990928.com-万彩计划官网| www.ad38.com-安徽体彩中心地址| www.yw32.com-惠民彩票怎么样| www.ly82.com-彩之家彩票-| www.790779.com-彩票智能选号软件| www.916203.com-福利彩票店经营技巧| www.017.net-955彩票邀请码| www.bg58.cc-福彩骗局-| www.vz35.com-人人中彩票官网下载| www.424347.com-有被金星彩票骗的吗| www.188638.com-彩票怎样算长龙| www.589553.com-3d双彩网-| www.81nm.com-彩神通有安卓版吗| www.024034.com-六台彩迷宫猪年有景| www.989328.com-彩店818怎么下载| www.sp36.com-秒速时时彩正规吗| www.79ld.com-福彩属相开奖| www.761634.com-甘肃体彩ll前三直| www.765126.com-彩票平台排行榜黑彩| www.9528.xyz-彩色沥青路面造价| www.31633.cc-一分钟易彩快3结果| www.63697.cc-沈阳快三彩票| www.045768.com-体彩19033-| www.46164.com-彩票分分快三| www.403062.com-七乐彩杀号图谜定胆| www.511847.com-大地彩排app| www.579978.com-七彩星txt微盘| www.652345.com-福彩年后开奖日期| www.721376.com-足彩一般在哪买| www.792212.com-福彩3d43期预测| www.875480.com-快钱彩票是真的吗| www.948128.com-手机好彩网-| www.998128.com-500时时彩彩票网| www.cq46.com-大发彩骗局-| www.vr56.com-竞彩足球胆拖稳赚法| www.562136.com-吉利彩票系统维护| www.11519.com-彩乐乐网官网| www.xe55.com-河南福彩跑马直播| www.567043.com-彩票真实性有多少| www.75rg.com-网易竞彩足球预测| www.739060.com-分分彩挂机怎么设置| www.856038.com-台北快三计划网址| www.986466.com-彩客网竞彩足球擂| www.hm1.com-彩票术语大全| www.085066.com-天天赢彩票靠谱吗| www.196185.com-爱彩乐5分快3规律| www.342789.com-足彩比分规则详解| www.23ib.com-福利彩票网点利润| www.8870.loan-如何买福利彩票复式| www.040747.com-广东快三平台| www.427899.com-快三分分彩真的假的| www.855022.com-雪缘足彩比分直播1| www.947453.com-网购福彩双色球| 500彩票www.51515y.com| www.820779.com-山东彩钢瓦厂| www.899133.com-快三河南几点开奖| www.964846.com-浙江体彩怎么下载| www.ce82.com-彩神v是真的吗| www.rt78.com-旺彩店主版-| www.318604.com-福彩3d开奖走势| www.396623.com-星期六有什么彩票| www.505055.com-黄渤彩票中奖| www.696702.com-彩世界时时彩| www.741041.com-澳门彩票有限公司网| www.844594.com-八千亿贪彩票| www.918880.com-博彩税收-| www.979471.com-彩金彩票app| www.pm3.cc-福建体彩-| www.oo33.com-中彩网大乐透走势图| www.948.com-福彩三b彩吧| www.099124.com-易彩测速福地| www.791073.com-广西福彩大厦23号| www.905155.com-快乐彩查询夙| www.999955.cc-香港买足彩-| www.em16.com-大发快三的玩法技巧| www.zz23.com-福彩标识图案| www.55ls.com-福彩乐-| www.636349.com-彩虹甜筒冰淇淋机| www.842226.com-那个彩票软件能杀号| www.cv09.com-搭建网络时时彩平台| www.861259.com-福彩三d字谜图谜| www.918087.com-三分快三规律破解| www.974256.com-环球彩票68806| 幸运彩票www.674007.com| www.917762.com-彩虹玫瑰花语| 大玩家彩票www.85090.com| www.047068.com-下载288彩票| www.237201.com-利博彩票-| www.353516.com-九州彩票软件下载| www.507361.com-3g彩票网址大全| www.670723.com-p3走势图彩经网| www.077368.com-中国福利彩开奖直播| www.876683.cc-利澳彩票不能提现| www.531225.com-水溶彩铅画星空教程| www.0060.com-竞彩比分怎么预测| www.80132.com-博彩龙虎怎么玩| www.478037.com-积分兑换福利彩票| www.852118.com-华人官方彩票登录网| www.4769.top-瑞典1分彩官网开奖| www.69186.com-印尼五分彩是哪里的| www.284120.com-彩票有什么种类| www.7193.com-宝乐彩票网-| www.214044.com-万人彩票-| www.754948.com-新华彩票公司| www.847272.com-爱彩竞猜-| www.909086.com-亚博彩票是骗局吗| www.963966.com-彩票保本翻倍模式| 彩票驿站www.621411.com| www.895153.com-万鑫彩票-| www.wb23.com-昨天晚上的福利彩票| www.256375.com-我要中彩票app| www.361563.com-书签百彩网大全| www.480560.com-新浪彩票旧版大全| www.76gp.com-一彩票招聘-| www.xq58.com-福利彩票第35期| www.59ft.com-中国竞彩网计算机| www.49132.com-一分钟分分时彩软件| www.xi03.com-七彩云集团有限公司| www.105761.com-香港皇家彩宝典网址| www.mg98.cc-彩票app下载软件| www.84qq.com-程序员中彩票| www.20739.com-彩神有赚钱的吗| www.330727.com-网赌彩票为什么输| www.028631.com-江苏快三属于黑彩吗| www.853.red-白鸽彩票-| www.4408.vip-快彩网平台怎么样| www.8959.in-聚彩堂计划下载| www.96rm.com-万豪彩票娱乐网站| www.971123.com-彩票有哪些类型| www.og79.com-卓易彩票以前版本| www.562908.com-彩坛之王-| www.283136.com-福彩三d开奖号码是| www.53258.cc-梦见买彩票号码| www.26hu.com-买彩书籍-| www.178025.com-贵州快三开奖爱彩乐| www.322714.com-百度福彩123| www.483067.com-一定牛体育彩票软件| www.19324.com-安徽省福利彩票开奖| www.113329.com-彩票预测表-| www.39488.com-好彩乐网络彩票平台| www.138347.com-中华彩票手机版下载| www.210292.com-有幸运快三的网站| www.190371.com-安徽快三免费计划网| www.052122.com-众筹买彩票-| www.562826.com-重庆快三玩法介绍| www.191975.com-湖北快三专用走势图| www.879465.com-多乐彩时间-| www.973430.com-彩虹宝宝电视| www.gf89.com-最快彩票开奖结果| www.025451.com-如何进入彩票数据库| www.108217.com-手机投注彩票上分|