JavaScript登陆弹窗，可拖拽

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript登陆弹窗，可拖拽</title>
<style type="text/css">
* { margin:0; padding:0; }
#box { width:400px; height:200px; background:#f9f9f9; border:1px solid #ccc; position:absolute; left:50%; top:50%; margin:-100px 0 0 -200px; border-radius:4px; box-shadow:0 0 15px #ddd; }
.title { padding:10px 20px; background-color:#f1f1f1; border-bottom:1px solid #ddd; font-size:14px; color:#333; }
.login { padding:30px 0 0 50px; }
.login p { margin-bottom:10px; font-size:14px; }
.login input.text { width:200px; padding:5px; border:1px solid #ddd; vertical-align:middle; }
.login input.btn { width:70px; padding:6px; border:1px solid #ddd; margin-left:41px; cursor:pointer; }
</style>
</head>

<body>

<div id="box">
    <h2 class="title">用户登录</h2>
    <div class="login">
    <form action="">
        <p><label>账户：</label><input type="text" name="" id="" class="text"></p>
        <p><label>密码：</label><input type="text" name="" id="" class="text"></p>
        <p><input type="submit" name="" id="" value="提 交" class="btn"></p>
    </form>
    </div>
</div>


<script type="text/javascript">
window.onload = function(){
    var oBox = document.getElementById("box");
    var oBtn = oBox.getElementsByTagName("h2")[0];
    var disX = 0;
    var disY = 0;
    oBtn.onmousedown = function(ev){
        var oEvent = ev||event;
        disX = oEvent.clientX-oBox.offsetLeft;
        disY = oEvent.clientY-oBox.offsetTop;
        oBox.style.cursor = "crosshair";
        document.onmousemove = function(ev){
            var oEvent = ev||event;
            var l = oEvent.clientX-disX;
            var t = oEvent.clientY-disY;
            oBox.style.margin = 0;
            if(l<0){
                l=0;
            }else if(l>document.documentElement.clientWidth-oBox.offsetWidth){
                l=document.documentElement.clientWidth-oBox.offsetWidth;
            }
            if(t<0){
                t=0;
            }else if(t>document.documentElement.clientHeight-oBox.offsetHeight){
                t=document.documentElement.clientHeight-oBox.offsetHeight;
            }
            oBox.style.left = l+"px";
            oBox.style.top = t+"px";
        }
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
            oBox.style.cursor = "default";
        }
        return false;
    }
    window.onresize = function(){
        if(oBox.offsetLeft>document.documentElement.clientWidth-oBox.offsetWidth){
            oBox.style.left=document.documentElement.clientWidth-oBox.offsetWidth+"px";
        }
        if(oBox.offsetTop>document.documentElement.clientHeight-oBox.offsetHeight){
            oBox.style.top=document.documentElement.clientHeight-oBox.offsetHeight+"px";

        }
    }
}
</script>
</body>
</html>

 

 

 

 

 

 

posted @ 2013-06-04 01:36  赵小磊  阅读(880)  评论(0)    收藏  举报
回到头部