ภาพหน้าจอมีดังนี้: (คุณสามารถเปลี่ยนความกว้างของ divs ทั้งสองด้านโดยการย้ายแถบสีน้ำเงินตรงกลาง)
รหัสการใช้งานเฉพาะมีดังนี้:
< %@ page language = "c#" autoEventWireUp = "true" codeFile = "default10.aspx.cs" สืบทอด = "default10" %> <! doctype html สาธารณะ "-// 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" type = "text/javascript" src = "jQuery 2.0.3.js"> </script> <style type = "text/css"> .highlighttextsearch {พื้นหลัง-สี: สีแดง; } a: โฮเวอร์ {สี: สีแดง; } .style2 {Width: 1000px; } .div {scrollbar-face-color: #dcdcdc; /* Cursor Color*/ Scrollbar-Shadow-Color: #99BBE8; /* Cursor Border Color*/ Scrollbar-Highlight-Color: #FF3300; /* ไฮไลต์เคอร์เซอร์*/ scrollbar-3dlight-color: #9EBFE8; Scrollbar-Darkshadow-Color: #9EBFE8; Scrollbar-Track-Color: #DFE8F6; /*แถบเลื่อนสีพื้นหลัง*/ แถบม้วนลูกศรสี: #6699ff; /*ลูกศรสี*/} </style> </head> <body> <form id = "form1" runat = "เซิร์ฟเวอร์"> <div> <table align = "center" cellpadding = "0" cellpacing = "0"> <tr> <td allign = "left" พื้นหลังสี: id = "moveModule"> </div> <div id = "Arrowborder" style = "Float: ซ้าย; align = "center"> </td> </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 ("เคอร์เซอร์", "e-resize");}); $ ("body"). mouseup (function () {this.releasecapture (); isdown = false; $ ("body"). css ("เคอร์เซอร์", "ค่าเริ่มต้น");}); $ ("body"). mousemove (ฟังก์ชั่น (เหตุการณ์) {ถ้า (isdown) {var _mx = event.clientx; // var _my = event.clienty; var _poin = $ ("#arrowborder") _rw = $ ("#rightframe"). width (); ถ้า (_lw + _w> minwidth && _w <0) || (_lw + _w <maxwidth && _w> 0)) _w); (_lw - minwidth));}}}}); </script> </form> </body> </html>