淡入淡出DIV层效果
<html> <head><script type="text/javascript"> var t=null //函数内临时时间对象变量(作用范围：全局变量) function disdiv(divid,type){ //Created by 刘何明 //At 2009-12-09 //淡入淡出DIV层效果 //参数说明 divid=>要执行操作的层的ID值，多个ID用","分割 type=>"open"?显示层 "close"?隐藏层 if(t){ window.setTimeout(function(){disdiv(divid,type);},10); //使同步进行的淡化效果进入排队系统，直至上个操作完毕后 自动执行本次效果 return false; } var i=(type=="close"?1:0); //对页面动作进行定义 var s=0.1; //保留数据，请勿修改 var speed=0.1 //默认渐隐的速度 0.2 (数值越小变化越慢越精细，同时占用系统资源也更多) var tmpo var tmpindex=0 //----------------开始对divid数列进行处理以及多个对象赋值---------------- var o = new Array(); if(divid.indexOf(",")==-1){ var dividArray = [divid]; }else{ var dividArray = divid.split(","); } //判断是否重复执行并对符合要求的DIV进行数组化整合 for(j=0;j<dividArray.length;j++){ tmpo = window.document.all[dividArray[j]] if((type=="open" && tmpo.style.display!="") || (type=="close" && tmpo.style.display!="none")){ o[tmpindex] = window.document.all[dividArray[j]] tmpindex++ } } //----------------结束对divid数列进行处理以及多个对象赋值---------------- if(o.length==0) return false; //如果所有参数元素都重复执行，则直接退出，不占用系统资源 for(j=0;j<o.length;j++){ if(type=="open"){o[j].style.display=""} //首先把层显示出来 } t=setInterval(function(){ if((i<0 && type=="close") || (i>1 && type=="open")){ //判断结束start window.clearInterval(t); for(j=0;j<o.length;j++){ o[j].filters[0].opacity = (type=="close"?0:100) if(type=="close"){o[j].style.display="none"} //消失后把层隐藏起来 } t=null; return false; //判断结束end }else{ //计算层的透明度 i+=s; s=i<0?speed:(i>1?-speed:s); for(j=0;j<o.length;j++){ if(o[j].filters) o[j].filters[0].opacity=i*100; else o[j].style.opacity=i; } } },1); } </script></head><body> <table cellspacing="0" cellpadding="0"> <tr> <td width=220> <input type=button value="全部显示" onclick="disdiv('bodydivleft1,bodydivright1','open');"> <input type=button value="全部关闭" onclick="disdiv('bodydivleft1,bodydivright1','close')"> <input type=button value="显示左边" onclick="disdiv('bodydivleft1','open');"> <input type=button value="关闭左边" onclick="disdiv('bodydivleft1','close')"> <input type=button value="显示右边" onclick="disdiv('bodydivright1','open');"> <input type=button value="关闭右边" onclick="disdiv('bodydivright1','close');"> <input type=button value="全部关闭然后显示右边" onclick="disdiv('bodydivleft1,bodydivright1','close');disdiv('bodydivright1','open')"> <div align="center"> <table border="0" width="1024" height=500 cellspacing="0" cellpadding="0"> <tr> <td width="50%"> <!--左边DIV区域--> <div id="bodydivleft1" style="z-index: 101; left: 0px; width: 100%; top: 0px; height: 100%; background: #CCCCCC; filter: Alpha(Opacity = 100)"> 我是左边 </div> </td> <td width="50%" valign="top"> <!--右边DIV区域--> <div id="bodydivright1" style="z-index: 101; left: 0px; width: 100%; top: 0px; height: 100%; background: #CCCCCC; filter: Alpha(Opacity = 100)"> 我是右边 </div> </td> </tr> </table></div></body></html>?