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天

知道了
1分快三 www.106805.com-瑞彩祥云输钱| www.042866.com-福福建福彩-| www.160582.com-3d乐彩网电脑版| 网易彩票www.36788f.com| www.580989.com-500彩票旧版首页| www.374378.com-好彩1单双选号技| www.006420.com-辽宁体彩十一迭五表| www.052299.com-彩神v软件是诈骗吗| www.2060.live-爱彩人彩票网大乐透| www.52879.cc-澳门好彩香烟| www.916635.com-天下彩票开奖| www.999926.com-易彩彩票官网app| www.ch86.com-黑彩量刑-| www.xq72.com-体彩大乐透37期| www.19rj.com-达芬奇密码彩票算法| www.838683.com-双色球彩友沙龙| www.924568.com-世纪佳缘上说买彩票| www.990728.com-怎么破解彩票的充值| www.cb20.com-福彩快开彩开奖结果| www.yh40.cc-华东福彩-| www.cn34.com-东北人玩彩独胆| www.iw1.cc-内蒙古快三儿| www.549206.com-哪里可以线上买足彩| www.cp5177.com-贵州快三开奖一定牛| www.bg26.com-私彩网站-| www.354018.com-胜负彩身价对比| www.862943.com-大智慧快三-| www.971851.com-8号彩票可靠吗| www.ip33.com-足球彩票19054| www.412159.com-体彩和福彩开奖日期| www.98653.cc-快三是不是假的| www.138332.com-360彩票网官网∴| www.bi5.cc-湖北快三精准预测| www.599633.com-现在去哪里买彩票| www.278661.com-快三三码必中| www.ls10.com-时时彩开奖号| www.054955.com-福彩3d平台下载| www.70559.com-体彩彩票终端机| www.910691.com-中国体彩nba| www.7600.cn-香港彩现场开奖直播| www.083089.com-彩票开奖中国彩吧网| www.009487.com-中国彩客网-| www.678622.com-中国足彩网即时赔率| www.905052.com-买竞彩犯法吗| www.vh56.cc-大发时时彩有规律吗| www.8169.shop-各种釉彩大瓶在哪| www.89kb.com-足彩通红球球app| www.717950.com-彩票平台刷水| www.573455.com-75彩票网登陆| www.654869.com-e77乐彩线路导航| www.455555.cc-网络快三购买技巧| www.87750.com-彩票藏机图是什么| www.m51.net-凤彩网双色球杀号| www.02yg.com-网购彩票2018| www.996816.com-网络彩票诈骗案案例| www.051655.com-福彩3d投注方法| www.952274.com-分分中彩票安全吗| www.cp264.com-江苏不在彩快3| www.230215.com-盈彩网真的能赚钱么| www.158962.com-快乐彩12开奖号码| www.086510.com-单人彩票最高奖金| www.234116.com-今天快三出奖号码| www.760537.com-快彩乐官网下载| www.995940.com-19046期胜负彩| www.252681.com-百姓彩票网官网| www.365307.cc-如何办理体彩销售点| www.a88.com-简单水彩画-| www.10347.com-爱彩乐陕西十一选五| www.49wt.cc-竞彩足球害的我很惨| www.9560.in-手机买彩票哪个正规| www.704322.com-永盛彩票老版| www.583533.com-彩票出奖规律| www.717373.com-彩色铅笔素描入门| www.799878.com-彩票查询排列五近期| www.cp417.cc-天天彩选四开奖| www.xz55.com-韩国彩票怎么买| www.43ae.com-足彩计算-| www.38592.cc-太子彩票下载| www.5559.tv-幸福彩手机报准确吗| www.373953.com-双色球走势图大星彩| www.582196.com-九九九彩票-| www.015843.com-体彩扑克牌豹子多钱| www.289050.com-678博彩论坛| www.392318.com-体彩中心app| www.657942.com-河内5分彩开奖网址| www.812745.com-彩6采票时时彩| www.493423.com-彩票有效期是多久| www.441822.com-体育彩票退机器押金| www.272470.com-广西福彩官网客户端| www.371219.com-环氧彩砂水磨石地坪| www.525235.com-时时彩大全app| www.623771.com-分分彩跟长龙技巧| www.700990.com-恒年网玩彩票靠谱吗| www.26385.cc-福彩3d今日开机号| www.3451.vip-免费送彩金18| www.8977.org-福利彩票选好法| www.33918.cc-五分快三违法吗| www.425755.com-进彩霸王主论坛| www.880723.com-淘宝彩票官网首页| www.975425.com-500彩票apk| www.cb78.com-彩51下载-| www.5gp.cc-彩票资金规划| www.94ln.com-20彩票教学视频| www.5533.top-附近卖体彩-| www.29989.com-体彩排列五在线投注| www.260890.com-彩票对比器-| www.3857.cc-竞彩资讯中国足球网| www.31653.cc-彩票套利平台| www.598351.com-第19024期体彩| www.073038.com-澳大利亚高频彩票| www.408010.com-福彩几个数字| www.515698.com-爱购彩会黑钱吗| www.576078.com-v9彩票苹果版| www.102571.com-马来3分彩开奖网站| www.235777.com-福彩快三专家推荐号| www.007255.com-七乐彩红球定胆| www.86456.com-每天想着买彩票发财| www.073336.com-梦想彩票站官方网站| www.675007.com-韩国二分彩网站| www.812370.com-福彩3d高手经验谈| www.902392.com-体彩机-| www.ph87.com-海南快三走势图表| www.88251.cc-lg传统彩哪个网站| www.182008.com-安全的快三app| www.347329.com-600万彩票网注册| www.452600.com-双彩网走势图| www.558474.com-彩铅画多肉植| www.796136.com-彩票选号有多少个| www.870619.com-152彩票安全吗| www.951146.com-网络中彩网-| E彩堂www.43818x.com| www.bc31.cc-快三官网开奖| www.261368.com-98彩票网谁知道| www.901746.com-体彩5d预测-| www.cp7378.com-北京快三来开奖结果| www.453175.com-2018体彩销售额| www.555255.com-人人红彩店-| www.664303.com-福彩三地太谜语| www.766889.com-天天彩选4开奖号| www.865963.com-有救济金的彩票软件| www.937317.com-福、彩双色球| www.995917.com-足彩电脑版-| www.ti93.com-481彩票网注册| www.820533.com-天津体彩下载地址| www.885478.com-新利彩票登-| www.948244.com-福彩3d开试机号| www.992822.com-中彩国际是什么| www.cp8948.com-贵州快三爱彩乐| www.733655.com-彩票开奖查询107| www.916553.com-足彩竞彩500万| www.983214.com-时时彩方法技巧大全| www.cm82.com-福建福州快三| www.si14.com-福彩三d出组三规律| www.69hk.cc-第一区块链彩票| www.3021.vip-众彩票线路导航| www.367995.com-七星彩番外txt| www.475224.com-手机版金誉彩票网| www.554848.com-网络快3彩票| www.608698.com-经彩出行收费标准| www.671110.com-超级大乐透彩经网| www.733110.com-南京体彩网点查询| www.797197.com-云购彩票平台靠谱吗| www.862888.cc-七乐彩我要投注| www.947912.com-发行体育彩票作用|