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

最新推荐文章于 2021-06-04 12:54:44 发布

zhangqgc

最新推荐文章于 2021-06-04 12:54:44 发布

阅读量545

点赞数 1

分类专栏： WEB前台>>HTML 文章标签： XHTML HTML JavaScript ViewUI

WEB前台>>HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

因为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" οnclick="isShowNav()" />
</body>
</html>

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

zhangqgc

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
点击frameset边框自动隐藏或显示窗口简单例子

因为frameset变宽不能放图片，所以这里将页面分成并列的三部分，其中中间的部分宽度与宽度一样，在这个图片上加鼠标点击事件，达到以假乱真的效果。1、主页面： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd...
复制链接

扫一扫