js实现拖动改变层的大小（宽度）

来源：互联网发布：java外包公司怎么找编辑：程序博客网时间：2024/04/28 01:04

鼠标拖动改变div的宽度变化：

<body>    <div id="div1" style="width: 100px; height: 100px; background: #CCCCCC; position: absolute; left: 500px; top: 200px;">        <div style="width: 10px; height: 100px; background: #DAA520; position: absolute; left: 0; cursor: move;"></div>        <div style="width: 10px; height: 100px; background: #DAA520; position: absolute; right: 0; cursor: move;"></div>    </div>    <script type="text/javascript">        var oDiv=document.getElementById("div1");        oDiv.onmousedown=function(ev){            var ev= ev || event;            var b='';            var disL=oDiv.offsetLeft;            var disW=oDiv.offsetWidth;            var disX=ev.clientX;            if ( disX > disL + disW - 10) {                b='right';            }else if ( disX < disL + 10 ) {                b='left';            }            if (oDiv.setCapture) {                oDiv.setCapture();            }            document.onmousemove=function(ev){                var ev = ev || event;                switch (b){                    case 'left':                        oDiv.style.width= disW - ( ev.clientX - disX ) + 'px';                        oDiv.style.left= disL + ( ev.clientX - disX ) + 'px';                        break;                    case 'right':                        oDiv.style.width= disW + ( ev.clientX - disX ) + 'px';                        break;                }            }            document.onmouseup=function(){                document.onmousemove=document.onmouseup=null;                if (oDiv.releaseCapture) {                    oDiv.releaseCapture();                }            }            return false;        }    </script></body>

0 0