jquery拉伸式登陆窗口效果js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery拉伸式登陆窗口效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jquery拉伸式登陆窗口效果</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <style type="text/css">
        <!--
        .login {
            background-color: #9CF;
            border-right-width: medium;
            border-bottom-width: medium;
            border-left-width: medium;
            border-right-style: solid;
            border-bottom-style: solid;
            border-left-style: solid;
            border-right-color: #333;
            border-bottom-color: #333;
            border-left-color: #333;
            top: 0px;
            width: 50px;
            position: absolute;
            -moz-border-radius-bottomright: 50px;
            -moz-border-radius-bottomleft: 50px;
            text-align: center;
            font-size: 18px;
            font-family: Arial, Helvetica, sans-serif;
            color: #333;
            padding: 10px;
        }

        .login-form input {
            background-color: #eee;
            border: 1px solid #333;
            color: #333;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }

        .login a {
            display: block;
        }

        .login-form a {
            font-size: 10px;
            text-decoration: none;
            color: #333;
            font-family: Arial, Helvetica, sans-serif;
        }
        -->
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".login-form").hide();
            $('#login-link').toggle(
               function () {
                   $('.login-form').slideDown(1000);
                   $('.login').animate({
                       width: '200'
                   }, 1000);
               },
               function () {
                   $('.login-form').slideUp(1000);
                   $('.login').animate({
                       width: "50"
                   }, 1000);
               });
        });
    </script>
</head>

<body bgcolor="#eeeeee">
    <div class="login">
        <div class="login-form">
            <form id="form1" name="form1" method="post" action="">
                <p>
                    <label>
                        Uname<br />

                        <input type="text" name="textfield" id="textfield" />
                    </label>
                    <br />
                    Pword<br />

                    <label>
                        <input type="text" name="textfield2" id="textfield2" />
                    </label>
                    <br />
                    <label>
                        <br />
                        <input type="submit" name="button" id="button" value="Login" />
                    </label>
                </p>
                <a href="#">Forgot password ?</a>
            </form>
        </div>
        <a id="login-link" href="#"><img src="login.png" width="48" height="48" border="0" /></a>
    </div><br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br /><br />
    <br />
    <br />
    <br />
    <br />
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)