窗口大小左右拖动demo

效果：
代码：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                 100px;
                height: 100px;
                background: skyblue;
                position: absolute;
                left: 500px;
                top:200px;
                
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
          window.onload = function()
          {
               var oDiv = document.getElementById("div1") ;
               oDiv.onmousedown = function(ev)
               {
                     var ev = ev || event;
                     var b = "";
                     var disX = ev.clientX ;
                     var disW = this.offsetWidth;
                     var disL = this.offsetLeft;
                     
                     if(disX > this.offsetLeft + disW -10)
                     {
                          b = "right";
                     }
                     if(disX < this.offsetLeft + 10)
                     {
                          b ="left";
                     }
                     document.onmousemove = function(ev)
                     {
                         var ev = ev || event;
                          switch(b)
                          {
                               case 'left':
                               //向左扩展要考虑 鼠标点移入距离的偏移值 默认为右方向。
                               //同时必须改变div的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;
                     }
                     return false;
               }
          }
        </script>
        <div id="div1"></div>
    </body>
</html>