DIV逐渐显示隐藏效果

 

第一种:

 

< script  type ="text/javascript" > ...  
var intervalId = null; 
function move(id,state)...{ 
  var obj = document.getElementById(id); 
  if(intervalId != null)  
    window.clearInterval(intervalId); 
  function change()...{ 
   var h = parseInt(obj.offsetHeight); 
   var speed=20;//速度
   if(h<300&state == "down")...{
   obj.style.display="block";
   obj.style.height = h + speed; 
   }
   if(h>2&state == "out")
   ...{
       obj.style.height = h - speed;
    if(h<=speed+2)
    ...{
        obj.style.display="none";
    }
   }
  } 
  intervalId = window.setInterval(change,2); 
} 
</ script >  
< table  border ="1"  cellspacing ="0" >
< tr >< td > ttttt </ td >
   < td > aaaaaaaaaa </ td >
</ tr >
< tr >
   < td  valign ="top" >< input  type ="button"  value ="close"  onClick ="move('mytd','out');" >
< input  type ="button"  value ="open"  onClick ="move('mytd','down');" ></ td >
   < td >
   &nbsp;
< div  id ="mytd"    style ="background-color:#00CCCC; overflow:hidden; display:none; width:300" >  

< div  id ="fileList"  style =" overflow-y:scroll;height:100; background:#3399CC"   > aaaaaaaaaaaaaa < br > aaaaaaaaaaaaaa < br > aaaaaaaaaaaaaa < br > aaaaaaaaaaaaaa < br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >< br > aaaaaaaaaaaaaa < br >
</ div >
< input  type ="file" >< input  type ="button"  value ="upload" >
</ div >
   </ td >
</ tr >
< tr >
   < td > fffffffffffffffffff </ td >
   < td > ddddddddddddddddddddd </ td >
</ tr >
</ table >
< br >
tttttttttttttt

 

 第二种:

< head >
< title > div < a  href ="3g/dongman.htm"  target ="_blank" > 动画 </ a > 显示 </ title >
< style > ...
* {...}{ margin:0; padding:0;}
body {...}{ text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;}
h1 {...}{ font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#333;  padding:3px; display:block; color:#99CC00}
.class1 {...}{ width:40%; background:#CCC; position:relative; margin:0 auto; padding:5px;}
span {...}{ position:absolute; right:10px; top:8px; cursor:pointer; color:yellow;}
p {...}{ text-align:left; line-height:20px; background:#333; padding:3px; margin-top:5px; color:#99CC00}
#class1content {...}{ height:300px;overflow:hidden;overflow:hidden}
</ style >
< script > ...
function $(element)...{
return element = document.getElementById(element);
}
function $D()...{
var d=$('class1content');
var h=d.offsetHeight;
var maxh=300;
function dmove()...{
h+=50; //设置层展开的速度
if(h>=maxh)...{
d.style.height='300px';
clearInterval(iIntervalId);
}else...{
d.style.display='block';
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function $D2()...{
var d=$('class1content');
var h=d.offsetHeight;
var maxh=300;
function dmove()...{
h-=50;//设置层收缩的速度
if(h<=0)...{
d.style.display='none';
clearInterval(iIntervalId);
}else...{
d.style.height=h+'px';
}
}
iIntervalId=setInterval(dmove,2);
}
function $use()...{
var d=$('class1content');
var sb=$('stateBut');
if(d.style.display=='none')...{
$D();
sb.innerHTML='展开';
}else...{
$D2();
sb.innerHTML='收缩';
}
}
</ script >
</ head >
< body >
< div  class ="class1" >
< h1 > Alone展开隐藏效果 </ h1 >
< span  id ="stateBut"  onclick ="$use()" > 展开 </ span >
< p  id ="class1content" > 小蜗牛问妈妈：为什么我们从生下来，就要背负这个又硬又重的壳呢？ < br  />  
妈妈：因为我们的身体没有骨骼的支撑，只能爬，又爬不快。所以要这个壳的保护！ < br  />
小蜗牛：毛虫姊姊没有骨头，也爬不快，为什么她却不用背这个又硬又重的壳呢？  < br  />
妈妈：因为毛虫姊姊能变成蝴蝶，天空会保护她啊。  < br  />
小蜗牛：可是蚯蚓弟弟也没骨头爬不快，也不会变成蝴蝶他什么不背这个又硬又重的壳呢？  < br  />
妈妈：因为蚯蚓弟弟会钻土, 大地会保护他啊。  < br  />
小蜗牛哭了起来：我们好可怜，天空不保护，大地也不保护。  < br  />
蜗牛妈妈安慰他：所以我们有壳啊！我们不靠天，也不靠地，我们靠自己。 </ p >
</ div >
ddddddddddddddddddd
</ body >
原文网址：http://www.prcer.com/blog/article.asp?id=899