html 选项展开和收起效果,JavaScript控制网页层收起和展开效果的方法

很酷的DIV层的展开收缩效果

* { 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

}

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='展开';

}

}

DIV层的展开隐藏效果

展开

曾经有一份真诚的爱情放在我面前，

我没有珍惜，
等我失去的时候我才后悔莫及，

人世间最痛苦的事莫过于此。

如果上天能够给我一个再来一次的机会，

我会对那个女孩子说三个字：
我爱你。

如果非要在这份爱上加上一个期限，

我希望是……一万年！”