`

点击frameset边框自动隐藏或显示窗口简单例子

XHTMLHTMLJavaScript 
阅读更多

因为frameset变宽不能放图片，所以这里将页面分成并列的三部分，其中中间的部分宽度与宽度一样，在这个图片上加鼠标点击事件，达到以假乱真的效果。

1、主页面：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<frameset id="main" cols="200,11,*" frameborder="no" border="0" framespacing="0">
  <frame src="frame/left.html" name="leftFrame" id="leftFrame" title="leftFrame" />
  <frame src="frame/middle.html" name="middleFrame" id="middleFrame" title="middleFrame"/>
  <frame src="frame/right.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
<noframes><body>
</body>
</noframes></html>

 

2、左边的页面，简单的设置下body的背景颜色

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{
	background-color:#00FF00;
}
</style>
</head>

<body>
</body>
</html>

 

3、右边的页面，也是简单设置下body的背景颜色

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{
	background-color:#0000FF;
}
</style>
</head>

<body>
</body>
</html>

 

4、中间的页面，最重要的界面

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
html,body{
	padding:0;
	margin:0;
}
img{
	margin-top:200px;
}
</style>
<script language="javascript">
function isShowNav(){
	if(window.parent.main.cols == "200,11,*"){
		window.parent.main.cols = "0,11,*";
	}else{
		window.parent.main.cols = "200,11,*";
	}
}
</script>
</head>

<body>
<img src="../images/click.jpg" onclick="isShowNav()" />
</body>
</html>

 

 

现在运行主页面就看到效果了。

分享到：
| Java中编码、乱码问题集锦（持续更新）
评论
4 楼 xiaonuo717 2016-03-17  
为啥谷歌浏览器用不了
3 楼 javaloverZY 2012-02-09  
把window.parent.main.cols 改为parent.document.getElementById("main").cols即可兼容火狐。
2 楼 javaloverZY 2012-02-09  
不能兼容火狐
1 楼 javaloverZY 2012-02-09  
if(window.parent.main.cols == "200,11,*"){ 
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics