經常看到別人做的框架頁可以收縮，自己也想做一個。偷偷研究了一下，發現並不神祕。嘿嘿。不敢獨享跟我一樣的菜鳥可以偷學兩招。嘿嘿。基本的效果可以看下圖：
仔細觀察下面的頁面，大多數人會回答是一個左右分的框架。呵呵。不然，其實他是左中右三分的框架頁。只不過中間的框架頁寬度非常之小而已。 查看源碼可以知道主框架源碼如下：
<frameset rows="*" cols="156,8,*" frameborder="0" border="0" id="frame" >
<frame src="menu.html" name="leftFrame" scrolling="auto" frameborder="0" />
<frame src="center.html" name="centerFrame" scrolling="auto" id="leftFrame" frameborder="0" />
<frameset rows="80,*" frameborder="no" border="0" >
<frame src="top.html" name="topFrame" scrolling="no" frameborder="0" id="topFrame" />
<frame src="login.html" name="mainFrame" frameborder="0" />
</frameset>
</frameset>
<noframes><body>對不起,您的瀏覽器版本不支持框架技術.</body></noframes>
<frame src="menu.html" name="leftFrame" scrolling="auto" frameborder="0" />
<frame src="center.html" name="centerFrame" scrolling="auto" id="leftFrame" frameborder="0" />
<frameset rows="80,*" frameborder="no" border="0" >
<frame src="top.html" name="topFrame" scrolling="no" frameborder="0" id="topFrame" />
<frame src="login.html" name="mainFrame" frameborder="0" />
</frameset>
</frameset>
<noframes><body>對不起,您的瀏覽器版本不支持框架技術.</body></noframes>
它將框架分爲左中右三分的。中間的框架頁寬度只有8.左邊設置了156。右邊爲剩餘大小。關鍵的部分還是在中間的頁面。注意frameset的id叫frame.下面會用到。所有的動態改變框架的代碼全部隱藏在中間的頁面中。代碼如下：
<script> var displayBar=true;
function switchBar(obj) {
if (displayBar){
parent.frame.cols="0,8,*"; displayBar=false; obj.src="image/center_open.gif"; obj.title="打開左邊管理菜單"; }else{ parent.frame.cols="156,8,*"; displayBar=true; obj.src="image/center_close.gif"; obj.title="關閉左邊管理菜單";
}
} </script> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" background="image/center_bg.gif"> <tr> <td valign="center"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div> <img src="image/center_close.gif" style="cursor:hand" title="關閉左邊管理菜單" onClick="switchBar(this)"></td> </tr> </table>關鍵的代碼已經看到了吧。關鍵的代碼只有一句。就是在圖片按鈕的onclick事件中改變父窗體中元素frame的cols的值，其實也就是改變了左中右框架的寬度。打開時左邊的寬度爲156，中間爲8，右邊爲*，關閉時左邊爲0,中間爲8，右邊還爲*，這是左邊框架就跟消失了一樣。呵呵。不錯吧。
好了，好的東西要大家一起分享。