特效介绍
点击登录按钮，弹出类似QQ登陆界面的登陆框，当输入框获取焦点，还会弹出提示，并且判断是否为QQ号码。点击登陆框右侧的下拉按钮，还会弹出二维码扫描登录的界面，如下图：
点击右上角关闭按钮可以关闭登陆框。当输入正确，点击登录框里面绿色登录按钮，会出现加载页面，提示正在登陆。
使用方法
1.在head引入相关js和css代码：<link href="css/login.css" rel="stylesheet" /> <script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="js/jquery.login.js" type="text/javascript"></script>2.复制下面代码到页面中即可。
<input id="loginStart" style="text-align:center" type='submit' value='登录' />
<div id="_login_div_quick_">
<div class="login_no_qlogin" id="login">
<div id="header" class="header">
<div class="logo"></div>
<div class="switch" id="switch">
<a class="switch_btn" id="switch_qlogin" href="javascript:void(0);" tabindex="7">快速登录</a>
<a class="switch_btn_focus" id="switch_login" href="javascript:void(0);" tabindex="8">帐号登录</a>
<div class="switch_bottom" id="switch_bottom"></div>
</div>
<a id="close" class="close" href="javascript:void(0)" title="关闭" tabindex="9"></a>
</div>
<div class="qrswitch" id="qrswitch">
<a class="qrswitch_logo" id="qrswitch_logo" href="javascript:void(0)" title="二维码登录"></a>
</div>
<div class="web_qr_login" id="web_qr_login">
<div class="web_qr_login_show" id="web_qr_login_show">
<div class="web_login" id="web_login">
<div class="tips" id="tips">
<div class="error_tips" id="error_tips">
<span class="error_logo" id="error_logo"></span>
<span class="err_m" id="err_m"></span>
</div>
<div class="operate_tips" id="operate_tips">
<span class="operate_content">手机号码也可登录哦，<a class="tips_link" id="bind_account" href="javascript:void(0);">登录个人中心绑定</a>
</span>
<span class="down_row"></span>
</div>
<div class="loading_tips" id="loading_tips">
<span id="loading_wording">登录中</span>
<img src="images/load.gif" alt="加载中..." />
</div>
</div>
<div class="login_form">
<form id="loginform" name="loginform" action="#" method="post" target="_self">
<div class="uinArea" id="uinArea">
<label class="input_tips" id="uin_tips" for="u">QQ号码/手机/邮箱</label>
<div class="inputOuter">
<input type="text" class="inputstyle" id="u" name="u" value="" tabindex="1" />
<a class="uin_del" id="uin_del" href="javascript:void(0);"></a>
</div>
<ul class="email_list" id="email_list"></ul>
</div>
<div class="pwdArea" id="pwdArea">
<label class="input_tips" id="pwd_tips" for="p">密码</label>
<div class="inputOuter">
<input type="password" class="inputstyle password" id="p" name="p" value="" maxlength="16" tabindex="2" />
</div>
<div class="lock_tips" id="caps_lock_tips">
<span class="lock_tips_row"></span>
<span>大写锁定已打开
</span>
</div>
</div>
<div class="submit">
<a class="login_button" href="javascript:void(0);">
<input type="button" tabindex="6" value="登 录" class="btn" id="login_button" />
</a>
</div>
</form>
</div>
<div class="bottom" id="bottom_web">
<a href="http://www.lanrentuku.com/" class="link" id="forgetpwd" target="_blank">忘了密码？</a>
<span class="dotted">|</span>
<a href="http://www.lanrentuku.com/" class="link" target="_blank">注册新帐号</a>
<span class="dotted">|</span>
<a class="link" id="feedback_web" href="http://www.lanrentuku.com/" target="_blank">意见反馈</a>
</div>
</div>
<div class="qrlogin" id="qrlogin">
<div class="qr_step" id="qrlogin_step1">
<div class="qr_tips">
请用手机app<a class="qr_link" href="http://www.lanrentuku.com/" target="_blank">QQ安全中心V1.5</a>扫描二维码
</div>
<div class="qrlogin_bg"></div>
<img class="qrlogin_img" id="qrlogin_img" src="images/ptqrshow.png" alt="" />
</div>
<div class="bottom" id="bottom_qr">
<a href="http://www.lanrentuku.com/" class="link" id="qrlogin_help" target="_blank">二维码使用帮助</a>
<span class="dotted">|</span>
<a href="http://www.lanrentuku.com/" class="link" target="_blank">注册新帐号</a>
<span class="dotted">|</span>
<a class="link" id="feedback_qr" href="http://www.lanrentuku.com/" target="_blank">意见反馈</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$.login('#loginStart');
</script>
注：登录按钮可以自定义，只要ID是“#loginStart”，如果不是的话，调用的js代码的ID需要填写正确。部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！