框架折叠/展开的脚本(自适应分辨率)

//首先定义一个全局变量，用来判断折叠或者展开的状态

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.框架折叠时：

 https://www.cnblogs.com/liudianjia/p/12513320.html

https://www.cnblogs.com/liudianjia/p/12513272.html

https://www.cnblogs.com/liudianjia/p/12495990.html

https://www.cnblogs.com/liudianjia/p/12488902.html

https://www.cnblogs.com/liudianjia/p/12484952.html

https://www.cnblogs.com/liudianjia/p/12479110.html