لقطة الشاشة كما يلي: (يمكنك تغيير عرض DIVs على كلا الجانبين عن طريق تحريك الشريط الأزرق في الوسط)
رمز التنفيذ المحدد كما يلي:
<٪@ page language = "c#" autoeventwireup = "true" codefile = "default10.aspx.cs" errantits = "default10" ٪> <! "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> head id = "head1" type = "text/javaScript" src = "jquery 2.0.3.js"> </script> <style type = "text/css">. } a: hover {color: red ؛ } .style2 {width: 1000px ؛ } .div {scrollbar-face-color: #dcdcdc ؛ /* consor color*/ scrollbar-shadow-color: #99bbe8 ؛ /* مؤشر اللون الحدودي*/ scrollbar-highlight-color: #ff3300 ؛ /* تسليط الضوء على المؤشر*/ scrollbar-3dlight-color: #9ebfe8 ؛ scrollbar-darkshadow-color: #9ebfe8 ؛ scrollbar-track-color: #dfe8f6 ؛ /*شريط خلفية شريط الانزلاق*/ scrollbar-arrow-color: #6699ff ؛ ! id = "movemodule"> </div id = "arrowborder" </tr> </lood> </viv> <script type = "text/javaScript"> var iSdown = false ؛ var minwidth = 160 ؛ var maxwidth = 800 ؛ $ ("#arrowBorder"). mousedown (function () {this.setCapture () ؛ iSdown = true ؛ $ ("body"). $ ("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 = $ ( _rw = $ ("#rightframe"). width () ؛ _w) ؛ (_lw - minwidth)) ؛ </script> </form> </body> </html>