多层半透明层的问题

nAnder 2008-06-12 04:03:52

思路：
A,B,C,D三个DIV层默认显示A 其他隐藏
在DIV层下设计一个按钮点后现在有层不变动
生层一个半透明层让现在显示的层处于不可操作状态。在半透明层上显示一个不透明的选择界面
选择显示 A,B,C,D 选择后半透明覆盖层和选择界面消失。

目前我做的代码如下做不到半透明效果。高手帮帮忙。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>:: KaiSure ::.:..</title>
<style>
/* 上下左右居中的开始 */
body,html {
height:100%;
overflow: hidden;
}
#center {
position:absolute;
top:expression((this.parentElement.offsetHeight-this.offsetHeight)/2);
left:expression((this.parentElement.offsetWidth-this.offsetWidth)/2);
}
/* 上下左右居中的结尾 */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background:url(images/bg.png);
}
.txt{
font-size:12px;
color:#000000;
}
</style>
<script>
function change1(){
document.all.post.style.visibility='hidden';
document.all.main1.style.visibility='visible';
document.all.main2.style.visibility='hidden';
document.all.main3.style.visibility='hidden';
document.all.main4.style.visibility='hidden';
}
function change2(){
document.all.post.style.visibility='hidden';
document.all.main1.style.visibility='hidden';
document.all.main2.style.visibility='visible';
document.all.main3.style.visibility='hidden';
document.all.main4.style.visibility='hidden';
}
function change3(){
document.all.post.style.visibility='hidden';
document.all.main1.style.visibility='hidden';
document.all.main2.style.visibility='hidden';
document.all.main3.style.visibility='visible';
document.all.main4.style.visibility='hidden';
document.
}
function change4(){
document.all.post.style.visibility='hidden';
document.all.main1.style.visibility='hidden';
document.all.main2.style.visibility='hidden';
document.all.main3.style.visibility='hidden';
document.all.main4.style.visibility='visible';
document.
}
</script>
</head>
<body>
<div id="center" style="background:#FFFFFF; width:100%; height:600px" class="txt">
<div id=main1 style="position:absolute;visibility: hidden">A内容
<iframe src="about:blank" frameBorder=0 noResize scrolling=no frameSpacing=0 target="_self"></iframe>
</div>
<div id=main2 style="position:absolute;visibility: hidden">B内容
<iframe src="about:blank" frameBorder=0 noResize scrolling=no frameSpacing=0 target="_self"></iframe>
</div>
<div id=main3 style="position:absolute;visibility: hidden">C内容
<iframe src="about:blank" frameBorder=0 noResize scrolling=no frameSpacing=0 target="_self"></iframe>
</div>
<div id=main4 style="position:absolute;visibility: hidden">D内容
<iframe src="about:blank" frameBorder=0 noResize scrolling=no frameSpacing=0 target="_self"></iframe>
</div>
<div id="post" style="position:absolute; visibility: hidden; left:0px; top:400px; width:1024px; height:100px; background-color: #FFFFC0; border: 1px none #000000">
选择菜单<input name="close" type="button" onclick="document.all.post.style.visibility='hidden'" value="退出"><br>
<font color="#000000">top div</font>
<input type="button" onclick="change1()" value="显示A>
<input type="button" onclick="change2()" value="显示B>
<input type="button" onclick="change3()" value="显示C>
<input type="button" onclick="change4()" value="显示D>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<input name="opend" type="button" onclick="document.all.post.style.visibility='visible'" value="选择">
</div>
</body>
</html>

...全文

205 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

nAnder 2008-06-12

打赏
举报

已经解决
多谢 s_liangchao1s 大大提供思路。终于搞定寒
我发现我在这个问题上转牛角尖了 = =||

结贴.

一把编程的菜刀 2008-06-12

打赏
举报

....你的代码页面上啥显示都没有，空白的

就不测试了
等你发布能显示出东西的代码来再测试

懒得从头到尾看修改了

s_liangchao1s 2008-06-12

打赏
举报



<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

<title>标题页</title>

<script language="javascript">

var timer          //定时器

var Opacity = 0    //背景覆盖色的透明度

function hide() { 

  myDiv.style.display = "block"                      //显示div层

  myDiv.style.height = document.body.scrollHeight    //要设置div的高度同窗体相同,以实现覆盖

  Opacity = 0

  event.srcElement.blur()                           //当前对象失去焦点

  timer = window.setInterval("AddOpacity()", 5)  //使用定时器逐渐增加窗体的透明度

}

 function AddOpacity()                               //变更透明度

{

  if (Opacity == 50)

  {

    window.clearInterval(timer)                         //清空定时器

    myBtn.style.display = "block"                       //显示按钮     

    return

  }

  Opacity = ( Opacity + 3 ) > 50 ? 50 : Opacity + 3     //判断透明度

  myDiv.style.filter = "Alpha(Opacity="  + Opacity + ")"//设置层的样式

}

function increOpa()                                     //透明度减小

{

  if (Opacity == 0)         

  {

    window.clearInterval(timer)                         //清空定时器

    myDiv.style.display = "none"                        //屏蔽层的显示

    return

  }

  Opacity = (Opacity - 3 < 0) ? 0 : Opacity - 3         //变更透明度

  myDiv.style.filter = "Alpha(Opacity="  + Opacity + ")"//设置层的样式

  

}

function btnChange()

{

  timer = window.setInterval('increOpa()', 5);          //设置定时器

  myBtn.style.display='none';                           //屏蔽按钮的显示

}

</script>

</head>

<body topmargin=0 leftmargin=0>

<div id=myDiv style="position:absolute;z-index:99; background-color:darkgray; Filter: Alpha(Opacity=0); border:1px solid #333333;display:none;width:100%;vertical-align:center;text-align:center"> </div>

<button onclick=hide()>hide</button>

<button id=myBtn style="position:absolute; left:100;top:200;z-index:100;display:none" onclick="btnChange()">返回</button>

<script>

  for (var i=0; i<30; i++)

  document.write ("<p>这是主要的页面，看看能不能动</p>")  //设置页面的内容，最好能超过一页，以看到屏蔽效果

</script>

</body>

</html>