让层渐渐透明，类似126邮箱命名文件夹，出错时的状态．．挺有意思的

最新推荐文章于 2025-12-15 13:00:22 发布

转载最新推荐文章于 2025-12-15 13:00:22 发布 · 545 阅读

文章标签：

#timer #generator #div #html #null #filter

1.0 JavaScript 专栏收录该内容

61 篇文章

订阅专栏

本文介绍了一种使用HTML与JavaScript实现页面元素动态显示与隐藏的方法。通过修改DOM元素的样式属性，可以平滑地调整元素透明度，实现元素的渐显渐隐效果。此外，还提供了一个简单的用户交互示例，展示了如何通过按钮点击触发元素的显示与隐藏。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.3790.2706" name=GENERATOR></HEAD>
<BODY>
<SCRIPT>
var strdo ="";
var ishide = true;
function showdiv(){
if(!ishide)return;
var obj = document.all.ly;
obj.style.display="block";
obj.style.width=document.body.clientWidth;
obj.style.height=document.body.clientHeight;
//mydiv.innerText=obj.filters.alpha.opacity
if(obj.filters.alpha.opacity>=100){
clearTimeout(timer1);
obj.filters.alpha.opacity=100;
ishide=false;
return;
    }else{
obj.filters.alpha.opacity+=5;
timer1=setTimeout("showdiv()",1)
return;
}
}
i=0
function hidediv(){
if(ishide)return;
var obj = document.all.ly;
timer1=null;
i++
if(obj.filters.alpha.opacity<=5){
obj.style.display="none";
timer1=null;
ishide = true;
return;
}
obj.filters.alpha.opacity=obj.filters.alpha.opacity -4;
if(obj.filters.alpha.opacity<=0)obj.filters.alpha.opacity=0
//alert(a)
//mydiv.innerText=i+":"+obj.filters.alpha.opacity+":"+(obj.filters.alpha.opacity<=5)
timer1=setTimeout("hidediv()",10)
}

function f_add()
{

  hidediv();

}
    </SCRIPT>

<DIV id=mydiv></DIV><INPUT onclick=showdiv() type=button value=显示>
<DIV id=ly
style="DISPLAY: block; Z-INDEX: 9999; FILTER: alpha(opacity=1); LEFT: 0px; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #ccc">
<DIV id=ly2
style="Z-INDEX: 99999; ; LEFT: expression((document.body.offsetWidth-document.all.tb_msg.offsetWidth)/2); ; WIDTH: expression(document.all.tb_msg.clientWidth); POSITION: absolute; ; TOP: expression((document.body.offsetHeight-document.all.tb_msg.offsetHeight)/2); ; HEIGHT: expression(document.all.tb_msg.clientHeight-80); BACKGROUND-COLOR: #fff"
align=center>
<TABLE id=tb_msg
style="BORDER-RIGHT: #e7e3e7 1px solid; BORDER-TOP: #e7e3e7 1px solid; BORDER-LEFT: #e7e3e7 1px solid; BORDER-BOTTOM: #e7e3e7 1px solid; BORDER-COLLAPSE: collapse"
cellSpacing=0 cellPadding=0 width=340 border=1>
  <TBODY>
  <TR>
    <TD
    style="PADDING-LEFT: 4px; FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #fff; PADDING-TOP: 2px; BACKGROUND-COLOR: #73a2d6"
    height=27>[数据保存]</TD></TR>
  <TR
  style="PADDING-RIGHT: 4px; PADDING-LEFT: 4px; PADDING-BOTTOM: 4px; PADDING-TOP: 4px; HEIGHT: 50px">
    <TD align=middle>保存成功</TD></TR>
  <TR>
    <TD style="BACKGROUND-COLOR: #f7f7f7" align=middle height=30><INPUT onclick=f_add() type=button value=新增>   <INPUT onclick="hidediv('modify')" type=button value=编辑记录>   <INPUT onclick="hidediv('exit')" type=button value=退出></TD></TR></TBODY></TABLE></DIV></DIV></BODY></HTML>