web——仿千牛登录

点击登录按钮，会弹出千牛的登录框，密码输入有一个蒙眼睛的动作，最小化会在左下角隐藏登录框，是不是很有趣呢！


<!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>

js代码

/*
 * 分析：
 * 获取鼠标实时移动的坐标；m_move_x,m_move_y
 * 鼠标按下时的坐标；m_down_x,m_down_y
 * div的坐标；dx,dy
 * 鼠标按下时，鼠标与div的偏移量；md_x,md_y
 * div的新坐标；ndx,ndy
 */

var isDown = false; //记录鼠标状态
var move_div; //要操作的div对象
var m_move_x, m_move_y, m_down_x, m_down_y, dx, dy, md_x, md_y, ndx, ndy;

//鼠标按下
function down() {
    move_div = document.getElementById("move_div");
    isDown = true;

    //获取鼠标按下时坐标
    m_down_x = event.pageX;
    m_down_y = event.pageY;

    //获取div坐标
    dx = move_div.offsetLeft;
    dy = move_div.offsetTop;

    //获取鼠标与div偏移量
    md_x = m_down_x - dx;
    md_y = m_down_y - dy;
}

//鼠标移动
function move() {
    move_div = document.getElementById("move_div");

    //实时更新div的坐标
    dx = move_div.offsetLeft;
    dy = move_div.offsetTop;

    //获取鼠标移动实时坐标
    m_move_x = event.pageX;
    m_move_y = event.pageY;

    //鼠标按下时移动才触发
    if(isDown) {

        //获取新div坐标，鼠标实时坐标 - 鼠标与div的偏移量
        ndx = m_move_x - md_x;
        ndy = m_move_y - md_y;

        //把新div坐标值赋给div对象
        move_div.style.left = ndx + "px";
        move_div.style.top = ndy + "px";

    }

}

//鼠标释放
function up() {
    isDown = false;
}

效果图
仿千牛登录

web——仿千牛登录

猜你喜欢