淡入淡出DIV层成效

淡入淡出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>
淡入淡出DIV层成效

相关推荐
