案例

来源：互联网发布：旅游对大数据需求编辑：程序博客网时间：2024/05/17 06:30
<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>            .login{                border: 1px solid #E0E0E0;                position: absolute;                width: 390px;                height: 310px;                /*display: none;*/            }            .user{                position: absolute;                top:140px;                left:90px;            }            .user input{                display: block;                margin: 15px auto;                width: 200px;                height:25px;                border-radius: 50px;                border: 1px solid #BABABA;                text-indent: 30px;                outline: none;/*取消获取焦点的默认效果*/            }            #userImg{                position: absolute;                top: 16px;                left: 3px;                width: 25px;                height: 25px;                border-radius:50% ;                overflow: hidden;            }            #userImg img{                margin-top: -14px;                margin-left: -12px;            }            #pwdImg{                position: absolute;                top: 60px;                left: 3px;                width: 25px;                height: 25px;                border-radius:50% ;                overflow: hidden;            }            #pwdImg img{                margin-top: -55px;                margin-left: -13px;            }            .user button{                display: block;                margin: 0px auto;                border: 1px solid #0894EC;                background-color: #0894EC;                color: #FFFFFF;                width: 150px;                height: 30px;                border-radius: 50px;            }            .user button:hover{                cursor: pointer;            }            .tz{                position: absolute;                top: 0px;                left: 0px;                width: 100%;                height: 100px;                z-index: 100;            }            .tz:hover{                cursor: move;            }            .min{                position: absolute;                right: 35px;                top: 4px;                width: 20px;                height: 20px;                z-index: 110;            }            .min:hover{                cursor: pointer;                border: 1px solid #FFFFFF;            }            .min-div{                position: absolute;                bottom: 5px;                left: 5px;                width: 150px;                height: 30px;                background-color: #0894EC;                line-height: 30px;                text-align: center;                color: #FFFFFF;                display: none;            }            .min-div:hover{                cursor: pointer;                opacity: 0.8;            }            .closeLogin{                position: absolute;                right:8px;                top: 4px;                width: 20px;                height: 20px;                z-index: 110;            }            .closeLogin:hover{                cursor: pointer;                /*border: 1px solid #FFFFFF;*/                background-color: #FFFFFF ;                opacity: 0.3;            }        </style>        <script>            //声明全局变量            var user,pwd,backimg,move_div,min_div;            //当前文档加载完成后再执行            window.onload = function(){                user = document.getElementById("userName");                pwd = document.getElementById("password");                backimg = document.getElementById("backimg");                move_div = document.getElementById("move_div");                min_div = document.getElementById("min-div");            }            //显示登录窗口            function showLogin(){                move_div.style.display = "block";            }            //获取焦点事件            function userFocus(){                user.style.borderColor = "#0894EC";            }            function pwdFocus(){                pwd.style.borderColor = "#0894EC";                backimg.src = "img/pwd-input.jpg";            }            //失去焦点事件            function userBlur(){                user.style.borderColor = "#BABABA";            }            function pwdBlur(){                pwd.style.borderColor = "#BABABA";                backimg.src = "img/user-input.jpg";            }            //登录窗口最小化            function minLogin(){                move_div.style.display = "none";                min_div.style.display = "block";            }            //登录窗口最大化            function maxLogin(){                move_div.style.display = "block";                min_div.style.display = "none";            }            //关闭窗口            function closeLogin(){                move_div.style.display = "none";            }        </script>        <script type="text/javascript" src="js/a.js" ></script>    </head>    <body>        <a href="javascript:showLogin();">登录</a>        <!--登录窗口-->        <div id="move_div" class="login" onmousedown="down()" onmouseup="up()" onmousemove="move()">            <!--实现拖拽的div-->            <div class="tz"></div>            <!--实现最小化按钮-->            <div class="min" onclick="minLogin()"></div>            <!--实现关闭按钮-->            <div class="closeLogin" onclick="closeLogin()"></div>            <img id="backimg" src="img/user-input.jpg" />            <!--用户输入-->            <div class="user">                <!--输入框图标-->                <div id="userImg">                    <img src="img/login-ioc.jpg" />                </div>                <div id="pwdImg">                    <img src="img/login-ioc.jpg" />                </div>                <input id="userName" type="text" onfocus="userFocus()" onblur="userBlur()" />                <input id="password" type="password" onfocus="pwdFocus()" onblur="pwdBlur()" />                <button>登录</button>            </div>        </div>        <!--最小化的div-->        <div id="min-div" class="min-div" onclick="maxLogin()">            +&nbsp;用户登录        </div>    </body></html>
运行结果