框架折叠/展开的脚本(自适应分辨率)
2007-07-30 00:03:44
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://shuxiao.blog.51cto.com/84971/36169 |
//首先定义一个全局变量,用来判断折叠或者展开的状态
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 = "images/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 = "images/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="images/jt1.jpg" alt="隐藏左栏" id="xy" onclick="sw()"/>”;
实例截图:
1.框架展开时:
![]() 2.框架折叠时:
![]() 本文出自 “网工笔记” 博客,请务必保留此出处http://shuxiao.blog.51cto.com/84971/36169 本文出自 51CTO.COM技术博客 |
附件下载:
关于这篇文章的源码
关于这篇文章的源码




pshuxiao
博客统计信息
热门文章
最新评论
友情链接