简易可移动-登陆窗口布局仿qq登陆窗口

316 查看

模板
图片描述
效果图

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>move</title>
    <link rel="stylesheet" type="text/css" href="../css/move.css">
    <link rel="stylesheet" type="text/css" href="../css/checkbox.css">
    <script src="../js/checkbox.js"></script>
    <script src="../js/move.js"></script>

</head>
<body>
    <div id="wrap">
        <div id="title">登陆</div>
        <div id="login">
            <form action="#">
                <table>
                    <tr>
                        <td>账号：</td>
                        <td><input type="text" name="username" value="用户名/邮箱"></td>
                    </tr>
                    <tr>
                        <td>密码：</td>
                        <td><input type="password" name="password"></td>
                    </tr>
                    <tr>
                        <td colspan="2"><input type="submit" value="确定"></td>
                    </tr>
                </table>
            </form>
        </div>
        <div id="statewrap" title="选择状态">
            <div id="statebar">在线</div>
            <ul id="checkboxes" style="display:none">
                <li class="option" id="online">在线</li>
                <li class="option" id="away">离开</li>
                <li class="option" id="hidden">隐身</li>
                <li class="option" id="busy">忙碌</li>
                <li class="option" id="silent">勿扰</li>
            </ul>
        </div>
        <div><input type="button" value="X" id="close"></div>
    </div>
</body>
</html>

CSS代码
checkbox.css

*{
    margin: 0;
    padding: 0;
    font-size: 14px;
}

#statewrap{
    width: 80px;
    margin: 0 auto;
    text-align: center;
}

#statebar{
    border: 1px solid #abb88e;
    cursor: pointer;
}

#checkboxes{
    list-style: none;
    border: 1px solid #ccc;
}

#checkboxes li:hover{
    background-color: #93d6c3;
    cursor: pointer;
}

move.css

*{
    margin: 0;
    padding: 0;
    font-size: 14px;
}

#wrap{
    width: 400px;
    height: 250px;
    position: absolute;
    left: 500px;
    top: 100px;
    background-color: #9c9;
    border-radius: 10px;
    border: 3px solid #aaa;
}
#wrap #title{
    width: 200px;
    height: 50px;
    margin: 0 auto;
    border-radius: 5px;
    background-color: #69c;
    cursor: move;
    font-size: 30px;
    line-height: 50px;
    text-align: center;
}

#login{
    width: 250px;
    margin: 0 auto;
    padding: 50px 0px;
    text-align: right;
}
#login table{
    margin: 0 auto;
}

#close{
    width: 25px;
    height: 25px;
    position: absolute;
    top: 5px;
    right: 5px;
}

#wrap #statewrap{
    background-color: #fff;
}

JS代码
checkbox.js

window.onload = function(){
    var statebar = document.getElementById('statebar');
    var option = document.getElementsByClassName('option');
    statebar.onclick=showBar;

    for(var i=0;i<option.length;i++){
        option[i].onclick=replace;
    }

    document.onclick=hiddenBar;
};

function showBar(event){
    var checkboxes = document.getElementById('checkboxes');
    checkboxes.style.display="block";
    event.stopPropagation();
}
function hiddenBar(){
    var checkboxes = document.getElementById('checkboxes');
    checkboxes.style.display="none";
}
function replace(event){
    var statebar = document.getElementById('statebar');
    var state = this.innerHTML;
    statebar.innerHTML = state;
}

move.js


window.onload=function(){
    var title = document.getElementById('title');
    title.onmousedown = fnDown;
    document.onmouseup = function(){
            document.onmousemove = null;
            // document.onmouseup = null;
    };
//checkbox实现
    var statebar = document.getElementById('statebar');
    var option = document.getElementsByClassName('option');
    statebar.onclick=showBar;

    for(var i=0;i<option.length;i++){
        option[i].onclick=replace;
    }

    document.onclick=hiddenBar;

    //关闭窗口
    var close = document.getElementById('close');
    close.onclick=function(){
        var wrap = document.getElementById('wrap');
        wrap.style.display="none";
    };
};

function fnDown(event){
    var wrap = document.getElementById('wrap');
    var disX = event.clientX-wrap.offsetLeft;
    var disY = event.clientY-wrap.offsetTop;

    document.onmousemove=function(event){
        var posX = event.clientX-disX;
        var posY = event.clientY-disY;
        var winW = document.body.clientWidthdocument.documentElement.clientWidth;
        var winH = document.body.clientHeightdocument.documentElement.clientHeight;
        var maxW = winW - wrap.offsetWidth;
        var maxH = winH - wrap.offsetHeight;
        if(posX<0){
            posX=0;
        }else if(posX>maxW){
            posX=maxW;
        }
        if(posY<0){
            posY=0;
        }else if(posY>maxH){
            posY=maxH;
        }
        wrap.style.left= posX +"px";
        wrap.style.top= posY +"px";

    };

}