javaScript实现可缩放的显示区效果代码

这篇文章主要介绍了javaScript实现可缩放的显示区效果代码,涉及JavaScript响应鼠标事件动态操作页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了javaScript实现可缩放的显示区效果代码。分享给大家供大家参考，具体如下：

这里演示可缩放的显示区，采用JS代码实现，鼠标按住区域的右下角，出现拖放箭头时，向下或向上拉，就可实现缩放操作，当区域较小时显示滚动条，平时也比较常见的效果，在此将JavaScript代码与大家分享。

运行效果截图如下：

在线演示地址如下：

http://demo.html.cn/js/2015/js-ksf-box-style-demo/

具体代码如下：

   可缩放的显示区 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; }   可缩放的显示区
     UNKNOWN { box-sizing: border-box; moz-box-sizing: border-box } #testDiv { 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 }   　
请在边框处拖动鼠标

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章: