框架摺疊/展開的腳本(自適應分辨率)

//首先定義一個全局變量，用來判斷摺疊或者展開的狀態

var s = true;
function sw(){

//左側框架
 var left=document.getElementById("left");

//右側框架
 var right=document.getElementById("right");

//中間框架，放置動作按鈕
 var midd=document.getElementById("midd");

//動作按鈕
 var xy = document.getElementById("xy");

 
 if (s){
  xy.src = "p_w_picpaths/jt2.jpg";   //左側框架摺疊時動作按鈕的圖片
  xy.alt = "展開左欄";   //左側框架摺疊時動作按鈕顯示的提示文字
  left.style.display = "none";   //隱藏左側框架
  midd.style.left = 0;  //使動作按鈕靠近屏幕左側
  right.style.left = 7;   //使右側框架的左邊句等於中間框架的寬度
  right.style.width=window.screen.availWidth-17;  //根據分辨率自動調整右側框架的寬度
  }else{
  xy.src = "p_w_picpaths/jt1.jpg";
  xy.alt = "隱藏左欄";
  left.style.display = "";
  midd.style.left = 170;
  right.style.left = 177;
  right.style.width=window.screen.availWidth-187;
  }
  s = !s;
}

備註說明：

1.將該腳本保存成一個JS文件，包含到需要的頁面當中；

2.根據實際情況改變腳本中變量所對應的框架ID以及動作按鈕圖片ID；

3.以該腳本爲例，動作按鈕代碼如“<img src="p_w_picpaths/jt1.jpg" alt="隱藏左欄" id="xy" onclick="sw()"/>”；

 

實例截圖：

1.框架展開時：

 

2.框架摺疊時：