程序博客网 > linux socket udp监听

jQuery仿QQ登录表单弹出窗 -- 一天一篇文章,持续更新

来源：互联网 发布：linux socket udp监听 编辑：程序博客网 时间：2024/06/05 19:43

jQuery仿QQ登录表单弹出窗,先上效果图


目录结构


index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">


<head>


    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />


    <title>jQuery仿QQ登陆表单DEMO演示</title>


    <link href="css/login.css" rel="stylesheet" />


    <script src="http://www.jqhtml.com/jquery/jquery-1.10.2.js"></script>


    <script src="js/jquery.login.js" type="text/javascript"></script>


</head>


<body>


    <!-- 代码 开始 -->


    <p id="loginStart" style="text-align:center">点我弹出登录框</p>


    <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="#" class="link" id="forgetpwd" >忘了密码？</a>


                            <span class="dotted">|</span>


                            <a href="#" class="link" >注册新帐号</a>


                            <span class="dotted">|</span>


                            <a class="link" id="feedback_web" href="#" >意见反馈</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="#" >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="#" class="link" id="qrlogin_help" >二维码使用帮助</a>


                            <span class="dotted">|</span>


                            <a href="#" class="link" >注册新帐号</a>


                            <span class="dotted">|</span>


                            <a class="link" id="feedback_qr" href="#" >意见反馈</a>


                        </div>


                    </div>


                </div>


            </div>


        </div>


    </div>


    <script type="text/javascript">


        $.login('#loginStart');


    </script>


    <!-- 代码 结束 -->


</body>


</html>


附上完整源码下载地址:点击打开链接

阅读全文
0 0
linux socket udp监听 linux socket udp监听
原创粉丝点击
热门IT博客
经营业绩怎么写数据经营业绩怎么写数据
stlink 怎么接单片机stlink 怎么接单片机
淘宝旺铺智能版多少钱
阿里云域名映射
网页游戏推荐知乎
最新的搞笑网络短剧
中国废除汉字知乎
索尼kdl60w600b装软件
2018程序员考试时间
常用会计软件
京东秒杀软件哪个好
施瓦茨科普知乎
招聘数据出售
a 算法解决八数码
淘宝牙齿矫正器的好处
恋夜秀场怎样抓取源码
淘宝双十一交易出故障
java获取每年除夕日期
51单片机蓝牙模块at
程序员专业术语
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 酥炸排骨的做法 青稞酥 水晶酥 天阶小雨润如酥 香酥小鱼仔 法式酥皮果子塔 酥梨 孕妇吃酥梨 酥梨图片 酥梨怎么吃 酥梨的功效 酥梨价格 早酥梨 蒲城酥梨 早酥梨价格 红酥梨 陕西酥梨 香酥梨 孕妇可以吃酥梨吗 孕妇能吃酥梨吗 吃酥梨的好处 中国酥梨之乡 酥梨皮可管吃 早酥梨多少钱一斤 砀山酥梨今日价格 酥梨的功效与作用 酥梨价格走势 哪些人不能吃酥梨 孕妇怀孕能吃青酥梨吗 你是我的情之所钟 酥梨 起酥油 酥油茶 酥油做法 酥油是什么 酥油茶做法 酥油饼做法 酥油花 酥油饼晋江 酥油图片 无水酥油 速溶酥油茶

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里