js调整对象的大小

// ///////////////////////////////////////////////////////////////////////

//  Generic Resize by Erik Arvidsson                                    //

//                                                                      //

//  You may use this script as long as this disclaimer is remained.     //

//  See www.dtek.chalmers.se/~d96erik/dhtml/ for mor info               //

//                                                                      //

//  How to use this script!                                             //

//  Link the script in the HEAD and create a container (DIV, preferable //

//  absolute positioned) and add the class="resizeMe" to it.            //

// ///////////////////////////////////////////////////////////////////////

 

var  theobject  =   null ;  // This gets a value as soon as a resize start

 

function  resizeObject() {

     this .el  =   null ;  // pointer to the object

     this .dir  =   "" ;       // type of current resize (n, s, e, w, ne, nw, se, sw)

     this .grabx  =   null ;      // Some useful values

     this .graby  =   null ;

     this .width  =   null ;

     this .height  =   null ;

     this .left  =   null ;

     this .top  =   null ;

}

 

 

// Find out what kind of resize! Return a string inlcluding the directions

function  getDirection(el) {

     var  xPos, yPos, offset, dir;

    dir  =   "" ;

 

    xPos  =  window.event.offsetX;

    yPos  =  window.event.offsetY;

 

    offset  =   8 ;  // The distance from the edge in pixels

 

     if  (yPos  <  offset) dir  +=   " n " ;

     else   if  (yPos  >  el.offsetHeight  -  offset) dir  +=   " s " ;

     if  (xPos  <  offset) dir  +=   " w " ;

     else   if  (xPos  >  el.offsetWidth  -  offset) dir  +=   " e " ;

 

     return  dir;

}

 

function  doDown() {

     var  el  =  getReal(event.srcElement,  " className " ,  " resizeMe " );

 

     if  (el  ==   null ) {

        theobject  =   null ;

         return ;

    }

 

    dir  =  getDirection(el);

     if  (dir  ==   "" )  return ;

 

    theobject  =   new  resizeObject();

 

    theobject.el  =  el;

    theobject.dir  =  dir;

 

    theobject.grabx  =  window.event.clientX;

    theobject.graby  =  window.event.clientY;

    theobject.width  =  el.offsetWidth;

    theobject.height  =  el.offsetHeight;

    theobject.left  =  el.offsetLeft;

    theobject.top  =  el.offsetTop;

 

    window.event.returnValue  =   false ;

    window.event.cancelBubble  =   true ;

}

 

function  doUp() {

     if  (theobject  !=   null ) {

        theobject  =   null ;

    }

}

 

function  doMove() {

     var  el, xPos, yPos, str, xMin, yMin;

    xMin  =   8 ;  // The smallest width possible

    yMin  =   8 ;  //              height

 

    el  =  getReal(event.srcElement,  " className " ,  " resizeMe " );

 

     if  (el.className  ==   " resizeMe " ) {

        str  =  getDirection(el);

         // Fix the cursor 

         if  (str  ==   "" ) str  =   " default " ;

         else  str  +=   " -resize " ;

        el.style.cursor  =  str;

    }

 

     // Dragging starts here

     if  (theobject  !=   null ) {

         if  (dir.indexOf( " e " )  !=   - 1 )

            theobject.el.style.width  =  Math.max(xMin, theobject.width  +  window.event.clientX  -  theobject.grabx)  +   " px " ;

 

         if  (dir.indexOf( " s " )  !=   - 1 )

            theobject.el.style.height  =  Math.max(yMin, theobject.height  +  window.event.clientY  -  theobject.graby)  +   " px " ;

 

         if  (dir.indexOf( " w " )  !=   - 1 ) {

            theobject.el.style.left  =  Math.min(theobject.left  +  window.event.clientX  -  theobject.grabx, theobject.left  +  theobject.width  -  xMin)  +   " px " ;

            theobject.el.style.width  =  Math.max(xMin, theobject.width  -  window.event.clientX  +  theobject.grabx)  +   " px " ;

        }

         if  (dir.indexOf( " n " )  !=   - 1 ) {

            theobject.el.style.top  =  Math.min(theobject.top  +  window.event.clientY  -  theobject.graby, theobject.top  +  theobject.height  -  yMin)  +   " px " ;

            theobject.el.style.height  =  Math.max(yMin, theobject.height  -  window.event.clientY  +  theobject.graby)  +   " px " ;

        }

 

        window.event.returnValue  =   false ;

        window.event.cancelBubble  =   true ;

    }

}

 

 

function  getReal(el, type, value) {

    temp  =  el;

     while  ((temp  !=   null )  &&  (temp.tagName  !=   " BODY " )) {

         if  (eval( " temp. "   +  type)  ==  value) {

            el  =  temp;

             return  el;

        }

        temp  =  temp.parentElement;

    }

     return  el;

}

 

document.onmousedown  =  doDown;

document.onmouseup  =  doUp;

document.onmousemove  =  doMove;