JS拖拽综合应用---改变窗口大小

景先源码 2015-03-23 765 0 js事件事件 event 拖拽
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS拖拽综合应用---改变窗口大小- www.xianstudy.com</title>
<style>
* { margin:0; padding:0; }
div { position:absolute; top:300px; left:300px;  width:200px; height:200px; background:#ccc; }
#rb { position:absolute; bottom:0; right:0; width:20px; height:20px; background:red; z-index:1; }
#r { position:absolute; top:0; right:0; height:100%; width:20px; background:green; }
#lb { position:absolute; bottom:0; left:0; width:20px; height:20px; background:red; z-index:1; }
#lt { position:absolute; top:0; left:0; width:20px; height:20px; background:red; z-index:1; }
#b {position:absolute; bottom:0; left:0; width:100%; height:20px; background:green; }
#l {position:absolute; top:0; left:0; height:100%; width:20px; background:green; }
</style>
<script>
window.onload=function (){
    var oDiv=document.getElementById('div1');
    var aChild=oDiv.children;
    
    for (var i=0; i<aChild.length; i++)
    {
        resize(aChild[i]);
    }
    

    function resize(obj)
    {
        if (obj.id.indexOf('r') != -1)
        {
            var nMaxW=document.documentElement.clientWidth-oDiv.offsetLeft;
        }
        
        if (obj.id.indexOf('b') != -1)
        {
            var nMaxH=document.documentElement.clientHeight-oDiv.offsetTop;
        }
        
        if (obj.id.indexOf('l') != -1)
        {
            var nMaxW=oDiv.offsetLeft+oDiv.offsetWidth;
        }
        
        var nMinW=nMinH=100;
        
        obj.onmousedown=function (ev){
            var oEvent=ev || event;
            // R
            if (obj.id.indexOf('r') != -1)
            {
                var oldX=oEvent.clientX;
                var oldW=oDiv.offsetWidth;
            }
            
            // B
            if (obj.id.indexOf('b') != -1)
            {
                var oldY=oEvent.clientY;
                var oldH=oDiv.offsetHeight;
            }
            
            // L
            if (obj.id.indexOf('l') != -1)
            {
                var oldW=oDiv.offsetWidth;
                var oldX=oEvent.clientX;
                var oldL=oDiv.offsetLeft;
            }
            
            // T
            if (obj.id.indexOf('t') != -1)
            {
                var oldT=oDiv.offsetTop;
                var oldY=oEvent.clientY;
                var oldH=oDiv.offsetHeight;
            }
            
            document.onmousemove=function (ev){
                var oEvent=ev || event;
                // R
                if (obj.id.indexOf('r') != -1)
                {
                    var newW=oEvent.clientX-oldX+oldW;
                    if (newW > nMaxW)
                    {
                        newW=nMaxW;
                    }
                    else if (newW < nMinW)
                    {
                        newW=nMinW;
                    }
                    oDiv.style.width=newW+'px';
                }

                // B
                if (obj.id.indexOf('b') != -1)
                {
                    var newH=oEvent.clientY-oldY+oldH;
                    if (newH > nMaxH)
                    {
                        newH=nMaxH;
                    }
                    else if (newH < nMinH)
                    {
                        newH=nMinH;
                    }
                    oDiv.style.height=newH+'px';
                }
                
                // L
                if (obj.id.indexOf('l') != -1)
                {
                    var newW=oldX-oEvent.clientX+oldW;
                    var newL=oldL-(oldX-oEvent.clientX);
                    
                    if (newW > nMaxW)
                    {
                        newW=nMaxW;
                    }
                    else if (newW < nMinW)
                    {
                        newW=nMinW;
                    } 
                    if (newL < 0)
                    {
                        newL=0;
                    }
                    else if (newL > oldW+oldL-nMinW)
                    {
                        newL=oldW-nMinW+oldL;
                    }
                    oDiv.style.width=newW+'px';
                    oDiv.style.left=newL+'px';
                }
                // T
                if (obj.id.indexOf('t') != -1)
                    var newH=oldY-oEvent.clientY+oldH;
                    
                    if (newH > oldT+oldH)
                    {
                        newH=oldT+oldH;
                    }
                    else if (newH < nMinH)
                    {
                        newH=nMinH;
                    }
                    var newT=oldT-(oldY-oEvent.clientY);
                    
                    if (newT < 0)
                    {
                        newT=0;
                    }
                    else if (newT > oldT+oldH-nMinH)
                    {
                        newT=oldT+oldH-nMinH;
                    }
                    oDiv.style.height=newH+'px';
                    oDiv.style.top=newT+'px';
                };
            document.onmouseup=function (){
                document.onmousemove=null;
                document.onmouseup=null;
            };        
        };
    }  
};
</script>
</head>

<body>
    <div id="div1">
        <span id="lt"></span>
        <span id="r"></span>
        <span id="rb"></span>
        <span id="lb"></span>
        <span id="b"></span>
        <span id="l"></span>
    </div>
</body>
</html>