可缩放的显示区

来源：互联网发布：淘宝处罚规则七天封店编辑：程序博客网时间：2024/05/16 14:01

<br>    <HTML>    <HEAD>    <META http-equiv='Content-Type' content='text/html; charset=gb2312'>    <TITLE>可缩放的显示区</TITLE>    </HEAD>    <BODY >    <style> {    box-sizing: border-box; moz-box-sizing: border-box    }    #testDiv     { background-color: buttonface; background-repeat: repeat;    background-attachment: scroll; color: #3969A5; height: 300px;    left: 30px; overflow: hidden; width: 500; z-index: 2;    border: 2px outset white; margin: 0px; padding: 2px;    background-position: 0% 50% }    body         { font-family: Verdana; font-size: 9pt }    #innerNice   { background-color: white; background-repeat: repeat; background-attachment:    scroll; color: #3969A5; height: 100%; overflow: auto; width:    100%; border: 2px inset white; padding: 8px;    background-position: 0% 50% }    </style>    <div class="resizeMe" id="testDiv">    <div id="innerNice">    <p align="center">　</p>    <p align="center">    请在边框处拖动鼠标</p>    <p>　</p>    <p>　</p>    <p>　</p>    </div>    </div>    <SCRIPT language=javascript>    /////////////////////////////////////////////////////////////////////////    // 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;    </SCRIPT>    </BODY></HTML>