这篇文章主要介绍了javascript实现可缩放的显示区效果代码，具有一定参考借鉴价值,需要的朋友可以参考下，具体如下：
这里演示可缩放的显示区，采用js代码实现，鼠标按住区域的右下角，出现拖放箭头时，向下或向上拉，就可实现缩放操作，当区域较小时显示滚动条，平时也比较常见的效果，在此将javascript代码与大家分享。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-ksf-box-style-demo/
具体代码如下：
<html><head><title>可缩放的显示区</title><style type=text/css>body { margin-top: 0px; font-size: 9pt; margin-left: 0px; margin-right: 0px; font-family: "宋体"}a { font-weight: 400; font-size: 9pt; color: black; text-decoration: none}a:hover { font-weight: 400; font-size: 9pt; color: red; text-decoration: underline}a:active { font: 9pt "宋体"; cursor: hand; color: #ff0033}.style1 {font-family: "华文彩云", "华文仿宋", "华文细黑", "华文新魏", "华文行楷", "华文中宋", "新宋体", "幼圆"}.style2 { font-family: "方正姚体"; font-weight: bold;}</style><meta http-equiv=content-type content="text/html; charset=gb2312"></head><body bgcolor=#fef4d9><center> <span class="style1"><font color=black size=16>可缩放的显示区</font></span></center><br><center><table bordercolor=#00ff00 border=5 borderlight="green"> <tbody> <tr> <td align=left> <style>unknown { box-sizing: border-box; moz-box-sizing: border-box}#testp { border-right: white 2px outset; padding-right: 2px; background-position: 0% 50%; border-top: white 2px outset; padding-left: 2px; z-index: 2; background-attachment: scroll; left: 30px; padding-bottom: 2px; margin: 0px; overflow: hidden; border-left: white 2px outset; width: 500px; color: #3969a5; padding-top: 2px; border-bottom: white 2px outset; background-repeat: repeat; height: 300px; background-color: buttonface}body { font-size: 9pt; font-family: verdana}#innernice { border-right: white 2px inset; padding-right: 8px; background-position: 0% 50%; border-top: white 2px inset; padding-left: 8px; background-attachment: scroll; padding-bottom: 8px; overflow: auto; border-left: white 2px inset; width: 100%; color: #3969a5; padding-top: 8px; border-bottom: white 2px inset; background-repeat: repeat; height: 100%; background-color: white}</style> <p class=resizeme id=testp> <p id=innernice> <p align=center> </p> <p align=center>请在边框处拖动鼠标</p> <p> </p> <p> </p> <p> </p></p></p> <script language=javascript>var theobject = null; //this gets a value as soon as a resize startfunction 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;}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> </td></tr></tbody></table></center></body></html>
以上就是本章的全部内容，更多相关教程请访问javascript视频教程！