截圖如下：（可通過移動(dòng)中間藍(lán)色的條，來改變左右兩邊div的寬度）
<%@ 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 runat="server"> <title></title> <script 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; /* 游標(biāo)的顏色 */ scrollbar-shadow-color: #99BBE8; /*游標(biāo)邊框的顏色*/ scrollbar-highlight-color: #FF3300; /*游標(biāo)高亮*/ scrollbar-3dlight-color: #9EBFE8; scrollbar-darkshadow-color: #9EBFE8; scrollbar-track-color: #DFE8F6; /*滑動(dòng)條背景顏色*/ scrollbar-arrow-color: #6699FF; /*箭頭顏色*/ } </style> </head> <body> <form runat="server"> <div> <table cellpadding="0" cellspacing="0"> <tr> <td> <table> <tr> <td valign="top"> <div> </div> <div> </div> <div> </div> </td> </tr> </table> </td> </tr> <tr> <td> </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").offset(); var _w = _mx - _poin.left; var _lw = $("#movemodule").width(); var _rw = $("#rightframe").width(); if ((_lw + _w > minwidth && _w < 0) || (_lw + _w < maxwidth && _w > 0)) { $("#movemodule").width(_lw + _w); $("#rightframe").width(_rw - _w); } else { if (_w > 0) { $("#movemodule").width(maxwidth); $("#rightframe").width(_rw - (maxwidth - _lw)); } else { $("#movemodule").width(minwidth); $("#rightframe").width(_rw + (_lw - minwidth)); } } } }); </script> </form> </body> </html>
新聞熱點(diǎn)
疑難解答
圖片精選
