一个自制的可拖动的仿千牛登录窗口

来源：互联网发布：前端数据可视化编辑：程序博客网时间：2024/05/18 00:33
说明:点击输入密码框后会出现如下图所示的小牛闭眼效果，实现这种效果的代码如下:
这里写图片描述
<head><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>
阅读全文
0 0