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

因为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>

 

 

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

你可能感兴趣的:(JavaScript,html,XHTML)