当前位置：模板网首页 > 特效插件 > 表单按钮 >  点击弹出类似QQ登陆界正文

特效介绍

点击登录按钮，弹出类似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需要填写正确。

点击弹出类似QQ登陆界面的登陆框特效效果预览 点击弹出类似QQ登陆界面的登陆框特效本地下载