谁知道怎样实现窗体缓慢出现与消失啊？

//javascript源码大全1.0版.chm
想起了这个可能对楼主有用　
渐显效果下拉菜单[推荐][修改显示的文字及链接][共2步][IE适用]====1、将以下代码加入HTML的<head></head>之间：<style>

</style>====2、将以下代码加入HTML的<body></body>之间：<ilayer id="dropmenu01" height=35px>
<layer id="dropmenu02" visibility=show>
<span id="iewrap">
<span id="iewrap2" onClick="dropit2();event.cancelBubble=true;return false">
<font face="宋体"><a href="#">点这里看本站栏目</a></font>
</span>
</span>
</layer>
</ilayer>
<script language="JavaScript1.2">
//如果想关闭 "fade"（消隐）效果，将如下参数设置成false，适用于IE用户。
var enableeffect=true
//将如下数组修改成你自己的。
var selection=new Array()
selection[0]='<font face="宋体"><a href="link1.htm">link1</a></font><br>'
selection[1]='<font face="宋体"><a href="link2.htm">link2</a></font><br>'
selection[2]='<font face="宋体"><a href="link3.htm">link3</a></font><br>'
selection[3]='<font face="宋体"><a href="link4.htm">link4</a></font><br>'
selection[4]='<font face="宋体"><a href="link5.htm">link5</a></font>'
if (document.layers)
document.dropmenu01.document.dropmenu02.visibility='show'
function dropit2(){
if (document.all){
dropmenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX
dropmenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (dropmenu03.style.visibility=="hidden"){
if (enableeffect)
dropmenu03.filters.revealTrans.apply()
dropmenu03.style.visibility="visible"
if (enableeffect)
dropmenu03.filters.revealTrans.play()
}
else{
hidemenu()
}
}
}
function dropit(e){
if (document.dropmenu03.visibility=="hide")
document.dropmenu03.visibility="show"
else
document.dropmenu03.visibility="hide"
document.dropmenu03.left=e.pageX-e.layerX
document.dropmenu03.top=e.pageY-e.layerY+19
return false
}
function hidemenu(){
if (enableeffect)
dropmenu03.filters.revealTrans.stop()
dropmenu03.style.visibility="hidden"
}
function hidemenu2(){
document.dropmenu03.visibility="hide"
}
if (document.layers){
document.dropmenu01.document.dropmenu02.captureEvents(Event.CLICK)
document.dropmenu01.document.dropmenu02.onclick=dropit
}
else if (document.all)
document.body.onclick=hidemenu
</script>====3、将以下代码加入HEML的<body></body>之间：[第2步的下面位置]

<div id="dropmenu03" style="position:absolute;left:0;top:0;layer-background-color:seashell;background-color:seashell;width:100;visibility:hidden;border:1px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
dropmenu03.style.padding='4px'
for (i=0;i<selection.length;i++)
document.write(selection[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.dropmenu03.captureEvents(Event.CLICK)
document.dropmenu03.onclick=hidemenu2
}
</script>
用jquery吧，就一句话
$('#dom ID').fadeOut();..完事
<!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>
</head><body><style>
.a1{ FILTER: alpha(opacity=100); width:100%; height:100%}
.a2{ FILTER: alpha(opacity=90); width:80%; height:80%}
.a3{ FILTER: alpha(opacity=80); width:70%; height:70%}
.a4{ FILTER: alpha(opacity=70); width:60%; height:60%}
.a5{ FILTER: alpha(opacity=60); width:50%; height:50%}
.a6{ FILTER: alpha(opacity=50); width:40%; height:40%}
.a7{ FILTER: alpha(opacity=40); width:30%; height:30%}
.a8{ FILTER: alpha(opacity=30); width:20%; height:20%}
.a9{FILTER: alpha(opacity=20); width:10%; height:10%}
.a10{ FILTER: alpha(opacity=0); width:0; height:0}</style>
<body>
<div id="fu">
<div  style="POSITION: relative; width:100px; height:100px" id="banner" >
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style=" POSITION: absolute;  DISPLAY: none "   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a>
<a href="#"><img src="http://avatar.profile.csdn.net/B/B/A/2_cb1156.jpg" border="0"  style="Z-INDEX: 4; POSITION: absolute;  DISPLAY: none"   /></a>
</div></div>
<a href="#" onclick="(fu.style.display=='none')?fu.style.display='block':fu.style.display='none';" >隐藏或显示</a>
</body><script>
var banner=document.getElementById("banner");//获得父容器
var img=banner.getElementsByTagName("IMG");//得到容器下的IMG
var i=0;//标记当前展示的IMG
displayFlag=true;//标记最外层容器是否被隐藏
function checkDisplay(obj){//循环banner的父元素，有任意一层隐藏则退出方法
while(obj.parentNode.tagName!="BODY"){
obj=obj.parentNode;
if(obj.style!=null)
if(obj.offsetWidth==0||obj.style.display=="none"||obj.style.visibility=="hidden"){
var imagesss=document.getElementById("banner").getElementsByTagName("IMG");

for(var fr=0;fr<imagesss.length;fr++){
imagesss[fr].style.visibility="hidden";
}
return displayFlag=false;
}
else
return displayFlag=true;
}
}
function change(){
img=banner.getElementsByTagName("IMG");//得到容器下的IMG
c=1;//定义className
var t=null;//定义计时器
t=setInterval(function(){
checkDisplay(banner);//运行前先判断一次是否被隐藏
if(c==10||!displayFlag)//一次循环结束，或者被隐藏了，则清空计时器
{
return clearInterval(t);//同时退出方法
}
if(c!=9)//目前只10个样式，循环到9则结束
{
img[i].className="a"+c;//定义新的CLASSNAME
img[i].style.display='inline';//把图片定义为显示状态
img[i].style.visibility='visible';
img[i].style.left=banner.offsetWidth - img[i].offsetWidth;//将图片居右
}
else{
img[i].style.left=0;//此时要隐藏图片，先将图片居左
img[i].className="a1";//再还原CLASSNAME
img[i].style.display="none";//最后隐藏
img[i].style.visibility='hidden';
}
if(i==img.length-1){//当图片循环到最后一张时的处理
img[0].style.left=0;
img[0].style.display="inline";//控制第1个图片显示
img[0].style.visibility='visible';
img[0].className="a"+(10-c);//定义第1个图片的CLASSNAME
}
else{
//否则改变i的下一张图片
img[i+1].style.left=0;
img[i+1].style.display="inline";
img[i+1].style.visibility='visible';
img[i+1].className="a"+(10-c);
}c++;//样式标记},100);//0。1秒变动一次
i++;
if(i>=img.length){//循环到最后一张则将i归0
i=0;
}
}
change();
setInterval(change,2000);//计时器</script>

</body>
</html>参考我当年的效果

调试易

谁知道怎样实现窗体缓慢出现与消失啊？

解决方案 »