스크린 샷은 다음과 같습니다.
특정 구현 코드는 다음과 같습니다.
< %@ page language = "c#"autoeventwireup = "true"codefile = "default10.aspx.cs"inherits = "default10" %> <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> head id = "runat ="runat "> </title"> </<scrit type = "text/javaScript"src = "jQuery 2.0.3.js"> </script> <스타일 유형 = "text/css"> .HighlightTexTearch {background-color : red; } a : 호버 {색상 : 빨간색; } .Style2 {너비 : 1000px; } .div {scrollbar-face-color : #dcdcdc; /* 커서 색상*/ Scrollbar-Shadow-Color : #99bbe8; /* 커서 테두리 색상*/ Scrollbar-Highlight-Color : #ff3300; /* 커서 하이라이트*/ scrollbar-3dlight-color : #9ebfe8; Scrollbar-Darkshadow-Color : #9ebfe8; Scrollbar-Track-Color : #dfe8f6; /*슬라이딩 바 배경 색상*/ Scrollbar-Arrow-Color : #6699ff; /*화살표 색상*/} </style> </head> <body> <form id = "form1"runat = "server"> <div> <table align = "center"cellpadding = "0"셀 패싱 = "0"> <tr> <td align = "left"valign = "top"> <div 스타일 = "오버 플로우 : 325px; 노란색 "movemodule"> </div> <div id = "float : 5px; </tr> </table> </div> <script type = "text/javaScript"> var isdown = false; var minwidth = 160; var maxwidth = 800; $ ( "#Arrowborder"). MousEdown (function () {this.setCapture (); isdown = true; $ ( "body"). css ( "cursor", "e- restize");}); $ ( "body"). mouseup (function () {this.releaseCapture (); isdown = false; $; $ ( "body"). css ( "cursor", "default");}); $ ( "body"). MousEmove (function (event) {if (isdown) {var _mx = event.clientx; // var _my = event.clienty; var _poin = $ ( "#arrowborder"). var _w = _mx -_poin.left; var _ $ ( "#movemoled _); $ ( "#rightframe"). if (_w> 0) {$ ( "#movemodule"). }}}}); </script> </form> </body> </html>