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.562962.com-江苏体彩新开奖| www.609622.com-盛大彩票的全部网址| www.012888.cc-多赢大发快三全能版| www.587379.com-奇门遁甲藏干测彩票| www.804647.com-中国福彩网彩票| www.611510.com-彩虹六号战绩查询网| www.776365.cc-时时彩后一三码技巧| www.180328.com-上海福彩快3爱彩乐| www.347911.com-添光溢彩近意词| www.488424.com-俩元彩票走势图| www.646964.com-足彩12转9算法| www.963949.com-大发快三稳赢方法| www.bs59.com-快彩网app-| www.lk11.com-中彩啦安卓版| www.cv6.com-马云买了26年彩票| www.17uf.com-彩票同期开出号| www.957030.com-有没有彩票挂机软件| www.62176.com-双彩球预测专家| www.978729.com-好彩一投注技考| www.a15.cn-乐彩论17500坛| www.3656.cc-万彩吧开奖查询3d| 易彩网www.12455z.com| www.75.biz-雨后彩虹的句子图片| www.07oh.com-水彩星空绘画| www.3769.cc-贵宾室彩票网页版| www.737833.com-购乐彩真的假的| www.910411.com-优彩彩票官网| www.19946.com-快三客彩票-| www.508877.com-哪个彩票销售额大| www.778082.com-zgg官方彩网站| www.913368.com-58彩票网安卓版| www.yk0.com-福利彩票快三单式| www.25zs.com-哪里的彩友多| www.09100.com-k3808鸿彩快三| www.024486.com-福星彩的资料| www.301229.com-苹果北京快三助手| www.522797.com-支付宝买彩票靠谱吗| www.439900.cc-时时彩账号-| www.595263.com-42期福利彩票| www.680706.com-巴巴彩票网站| www.883735.com-博友彩登录官网| www.981483.com-彩票专家查询| www.em16.com-大发快三的玩法技巧| www.658449.com-彩视怎么做-| www.186222.com-老时时彩开奖时间| www.356185.com-分分彩助手-| www.096970.com-3d彩吧红星图库| www.202280.com-785彩票-| www.615289.com-福彩3d玩法及价格| www.738485.com-七天彩掌上购彩官网| www.829234.com-188彩票官网网站| www.932255.com-彩钢围挡价格| 彩82www.c6770.com| www.pu99.cc-5g彩票-| www.95ld.com-叮叮彩店二维码| www.8123.biz-体彩那个电视台开奖| www.50487.com-快三一分钟一期计划| www.078785.com-竞彩过关玩法| www.3231.top-维彩看球下载| www.35996.com-福利彩票小助手| www.083711.com-网络博彩违法吗| www.222143.com-彩票销售改革| www.389953.com-体彩字谜总汇| www.872172.com-官方中彩网首页| 福利彩票www.78700f.com| www.yu56.com-酷彩彩票app| www.276887.com-重庆合买彩票| www.664244.com-头彩网是真的吗| www.820288.com-七乐彩开奖结果预测| www.500809.com-中国什么时候有彩照| www.37cd.cc-一定牛彩票足彩直播| www.6178.pw-彩色混凝土供应| www.57788.com-网易彩票我要中彩| www.233600.cc-河北快三玩法一定牛| www.341553.com-诺亚彩票手机下载| www.506487.com-竞彩258正规| www.606623.com-重庆体彩中心主任| www.711181.com-网络购彩刷流水| www.872811.com-体彩加盟电话| www.77507.com-赢彩吧合法吗| www.556481.com-永利彩票会员登录| www.62pw.com-彩票中奖的税率| www.1009.net-周一彩票-| www.9567.in-武汉福彩店铺转让网| www.62038.cc-三彩网是什么| www.270358.com-7彩图片-| www.if98.com-时时彩平台推荐| www.04ra.com-彩铅人物画-| www.85no.com-福彩中彩网三d开机| www.1937.top-体彩店转让合同范本| www.8325.org-七星彩字图片大全| www.28126.com-昆山体彩大奖| www.372306.com-福彩开奖号是多少| www.511768.com-古风画图片女彩铅| www.608996.com-彩票几点开奖3d| www.698815.com-彩铅排线技巧图片| www.801752.com-福彩一体机监控下载| www.902683.com-微信里买快三赚钱| www.972161.com-湖北彩票换球案| www.gb27.com-福彩3b字谜专区| www.u10.com-偷偷领彩票-| www.85iz.com-福彩3d胖哥说彩| www.179620.com-10分快三计划软件| www.306810.com-彩乐园ll-| www.399700.com-体育彩票有多少球队| www.866182.com-易迅彩票官网首页| www.954101.com-黑龙江福彩app| 500彩票www.50024c.com| www.nd31.com-皇都彩票可信吗| www.59fj.com-彩票店运营管理| www.255062.com-时时彩官方开奖| www.349584.com-江苏e球彩视频直播| www.yt71.com-国家体彩中心主任| www.49pe.com-彩厍宝典下截苹果版| www.22828.cc-手机上怎样买彩票| www.84567.com-七星彩新浪开奖直播| www.173405.com-大发快三网址| www.3821.xyz-七星彩长条图局王| www.098368.com-彩票3d字谜总汇| www.182777.com-全天江苏快三计划网| www.269733.com-百盈彩票在线官网| www.363549.com-即时开彩下载安装8| www.481399.com-彩票五块钱兑换期限| www.576360.com-竞彩2串1破产| www.826011.com-赛车彩票网-| www.901107.com-燕赵福彩排列五| www.964434.com-足彩最新预测股票| 吉利彩票www.66376m.com| www.rq53.com-一分快三有啥平台| www.07cn.com-中国福彩75期| www.89qm.com-广东快乐十分彩控网| www.506598.com-四柱测彩票数字绝招| www.796857.com-胜负彩18109| www.03uj.com-起点彩票是黑平台吗| www.683665.com-时时彩追热没输过| www.798935.com-8彩票下载-| www.869091.com-彩票和尾走势图| www.eq73.com-福彩双色球玩法规则| www.ws50.com-彩名堂官网-| www.16kt.com-幸运彩大发快3下载| www.3102.pw-彩票体彩开奖号码是| www.8438.pw-福彩双色球中奖票| www.98110.com-竞彩首页计算| www.077686.com-玩彩输30万怎么办| www.163878.com-彩票害死了很多人| www.353659.com-程阳彩票是干什么的| www.498492.com-5k彩票会员-| www.582294.com-深圳体彩举报电话| www.722512.com-cp248彩票-| www.812424.com-彩吧彩票买大小| www.889052.com-足彩受让是什么意思| www.aj42.com-够力七星彩新版| www.wy66.com-昨天彩票中奖号码| www.14jb.com-福彩3d一天一胆| www.84rz.com-彩票开奖端口api| www.1927.com-竞彩彩票店怎么申请| www.7398.loan-色彩画人物-| www.21363.cc-今天足球竞彩对阵表| www.62666.com-篮球比赛竞彩网| www.010370.com-河北福彩试机号今天| www.079048.com-幸运财神彩票机漏洞| www.143235.com-福彩中心编制改革| www.221464.com-彩票修改神器| www.296965.com-彩票k线图怎么看|