Снимок экрана выглядит следующим образом: (вы можете изменить ширину DOV с обеих сторон, перемещая синюю полосу посередине)
Конкретный код реализации выглядит следующим образом:
< %@ Page language = "c#" autoeventwireup = "true" codefile = "default10.aspx.cs" inherits = "default10" %> <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en"-// w3c // dtd xhtml 1.0. "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <Head Id = "haid1" type = "text/javascript" src = "jquery 2.0.3.js"> </script> <style type = "text/css"> .highlighttextesearch {founal-color: red; } a: Hover {color: Red; } .style2 {width: 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; /*Цвет фона скользящих стержней*/ crollbar-rrow-color: #6699ff; /*Цвет стрелки*/} </style> </head> <body> <form id = "form1" runat = "server"> <div> <table align = "center" cellpadding = "0" сотока = "0"> <tr> <td align = "Left" Valign = "top"> <div style = "overflow: auto; wildth: 325px; Yellow "ID =" MovieModule "> </div> <div Id =" Arrowborder ". </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-resize");}); $ ("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"). offset (); var _w = _mx - _poin.left; var _lw = $ (##visemod "). $ ("#RightFrame") {if (_w> 0) {$ ("#Movemodule"). Ширина (maxwidth); minwidth)); </script> </form> </body> </html>