web弹出层可移动

　　以前写过不可以移动的弹出层，始终想要让它可以在页面上可以移动。

　　其实也想到了大概应该怎么样实现，但是不太肯定，上网查了一下，果然跟自己想的差不多。。。。

　　通过给<div>加上onmousedown,onmousemove,onmouseup这几个事件处理函数，通过调整css即可实现，原理还是挺简单的。。。

　　另外自己还顺便了解了一些简单的动态效果是如何实现的，setInterval和clearInterval这两个函数配合起来使用。

 

页面源代码：

　　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
    <style>
        #content{
            border:8px solid #CCCCCC;
            position:absolute;
            left:25%;
            top:25%;
            background-color:#FFFFFF;
            display:none;
            cursor:move;
        }
        
    </style>
    
</head>

<body>
    <br />
    <button onclick="doIt()">弹出来</button>
    <div id="content">
        这是一个弹出的窗口<button onclick="closeIt()" style="margin-left:80%">关闭</button>
        <br />
        <input type="password" />
    </div>
</body>

<script type="text/javascript">
        var flag=false;
        var nx,ny;
        function $(sId){
            return document.getElementById(sId); 
        }
        $("content").onmousedown=function(ev){
            var ev = ev || window.event ;
            if(ev.button==0){
                flag=true;
                nx=ev.clientX;
                ny=ev.clientY;
            }
            
        }
        $("content").onmouseup=function(e){
            var e=e||window.event;
            flag=false;    
        }
        $("content").onmousemove=function(e){
            if(flag){
                var e=e||window.event;
                var mx=e.clientX-nx;
                var my=e.clientY-ny;
                if($("content").style.left==''){
                    $("content").style.left = $("content").offsetLeft + "px";
                       $("content").style.top = $("content").offsetTop + "px";
                }
                $("content").style.left=parseInt($("content").style.left)+mx+"px";
                $("content").style.top=parseInt($("content").style.top)+my+"px";
                nx=e.clientX;
                ny=e.clientY;
            }
            
        }
        var prox;
        var proy;
        function openy(obj,y){
            var tx=parseInt(obj.style.height);
            if(tx<y){
                obj.style.height=tx+25+"px";
            }else{
                clearInterval(proy);
            }
        }
        function openx(obj,x){
            var tx=parseInt(obj.style.width);
            if(tx<x){
                obj.style.width=tx+25+"px";
            }else{
                clearInterval(prox);
                proy=setInterval(function(){openy(obj,400)},10);
            }
        }
        function open(obj){
            clearInterval(prox);
            clearInterval(proy);
            prox = setInterval(function(){openx(obj,400)},10);
            
        }
        
    
        function doIt(){
            $("content").style.display='block';
            $("content").style.width='1px';
            $("content").style.height='1px';
            open($("content"));
        }
        
        
        function closeIt(){
            document.getElementById("content").style.display='none';
        }
    </script>
</html>

posted on 2011-12-07 15:26  fjs_cloud  阅读(229)  评论(0)    收藏  举报

导航