スクリーンショットは次のとおりです。
特定の実装コードは次のとおりです。
<%@ page Language = "c#" autoeventwireup = "true" codefile = "default10.aspx.cs" 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"> type = "text/javascript" src = "jquery 2.0.3.js"> </script> <style type = "text/css"> .highlighttextsearch {background-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; /*スライドバーの背景色*/ scrollbar-arrow-color:#6699ff; /*矢印の色*/} </style> </head> <body> <form id = "form1" runat = "server"> <div> <table align = "center" cellpadding = "0" cellpacing = "0"> <tr> <td align = "left" valign = "top"> <div style = "ovat; width:325px;背景 - "id =" movemodule "> </div id =" float:width:500px; 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( "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")。 _rw = $( "#redframe")。 _W) (_lw -minwidth)); </script> </form> </body> </html>