JavaScript基础—仿千牛登录界面

来源：互联网发布：单片机音乐播放器设计编辑：程序博客网时间：2024/06/05 21:53
这里写图片描述
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            .login{                border: 1px solid #E0E0E0;                position: absolute;                top: 200px;                left: 30%;                width: 390px;                height: 310px;                display: none;            }            .user input{                display: block;                margin: 20px auto;                width: 200px;                height: 25px;                font-size: 14px;                text-indent: 32px;                border-radius: 30px;                border: 1px solid #BABABA;                outline: none;            }            .user{                position: absolute;                top: 130px;                left: 90px;            }            .icon-user{                display: block;                position: absolute;                border-radius: 50px;                top: 21px;                left: 5px;                width: 25px;                height: 25px;                overflow: hidden;            }            .icon-user img{                position: absolute;                top: -14px;                left: -12px;            }            .icon-pwd{                display: block;                position: absolute;                border-radius: 50px;                top: 70px;                left: 5px;                width: 25px;                height: 25px;                overflow: hidden;            }            .icon-pwd img{                position: absolute;                top: -55px;                left: -13px;            }            .min{                position: absolute;                top: 5px;                right: 35px;                width: 20px;                height: 20px;                z-index: 110;            }            .close-login{                position: absolute;                top: 5px;                right: 7px;                width: 20px;                height: 20px;                z-index: 110;            }            .min-div{                position: absolute;                bottom: 1px;                width: 100px;                height: 30px;                background-color: #0894EC;                color: #FFFFFF;                text-align: center;                line-height: 30px;                display: none;            }            .min:hover{                cursor: pointer;                border: 1px solid #FFFFFF;            }            .close-login:hover{                cursor: pointer;                border: 1px solid #FFFFFF;            }            .min-div:hover{                cursor: pointer;                opacity: 0.8;            }            #move{                position: absolute;                top: 0;                left: 0;                width: 100%;                height: 100px;                z-index: 100;            }            #move:hover{                cursor: move;            }            .user button{                width: 200px;                height: 30px;                display: block;                margin: 0px auto;                border: 1px solid #0894EC;                background-color: #0894EC;                color: #FFFFFF;                border-radius: 50px;            }            .user button:hover{                cursor: pointer;            }        </style>        <script type="text/javascript" src="js/a.js" ></script>        <script>            //显示登录窗口            function loginShow(o){                document.getElementById("move_div").style.display = "block";                document.getElementById("btn").style.display = "none";            }            //用户框获取焦点            function userFocus(){                var user = document.getElementById("userName");                user.style.borderColor = "#0894EC";            }            //用户框失去焦点            function userBlur(){                var user = document.getElementById("userName");                user.style.borderColor = "#BABABA";            }            //密码框获取焦点            function myFocus(){                var backimg = document.getElementById("backimg");                var pwd = document.getElementById("password");                backimg.src = "img/pwd-input.jpg";                pwd.style.borderColor = "#0894EC";            }            //密码框失去焦点            function myBlur(){                var backimg = document.getElementById("backimg");                var pwd = document.getElementById("password");                backimg.src = "img/user-input.jpg";                pwd.style.borderColor = "#BABABA";            }            //最小化            function min(){                document.getElementById("move_div").style.display = "none";                document.getElementById("min-div").style.display = "block";            }            //最大化            function max(){                document.getElementById("move_div").style.display = "block";                document.getElementById("min-div").style.display = "none";            }            //关闭窗口            function closeLogin(){                document.getElementById("move_div").style.display = "none";                document.getElementById("btn").style.display = "block";            }        </script>    </head>    <body>        <button id="btn" onclick="loginShow()">登录</button>        <div id="move_div" class="login">            <img id="backimg" src="img/user-input.jpg" />            <!--拖拽区域-->            <div id="move" onmousedown="down()" onmouseup="up()" onmousemove="move()"></div>            <!--最小化-->            <div id="min" class="min" onclick="min()"></div>            <!--关闭-->            <div id="close-login" class="close-login" onclick="closeLogin()"></div>            <!--用户输入-->            <div class="user">                <span class="icon-user">                    <img src="img/login-ioc.jpg" />                </span>                <span class="icon-pwd">                    <img src="img/login-ioc.jpg" />                </span>                <input id="userName" type="text" onfocus="userFocus()" onblur="userBlur()"/>                <input id="password" type="password" onfocus="myFocus()" onblur="myBlur()" />                <button>登录</button>            </div>        </div>        <!--最小化后显示区域-->        <div id="min-div" class="min-div" onclick="max()">            +用户登录        </div>    </body></html>
阅读全文
0 0