Show and hide part of the web page Expand and collapse page special effects

Web Resource Code Station Tips: Test the special effects of displaying part of the hidden web page, expanding and collapsing the page, and see the effect - because it is necessary to refresh the to load JS Partial content web page special effects-dyunr.com * { 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; //Set the speed of layer expansion 23sc.cn 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;//Set layer shrinkage Speed 23sc.cn if(h 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='expand'; }else{ $D2(); sb.innerHTML='shrink'; } } Alone expand hidden effect Expand Show Hide Part of the Web PageExpand Collapse Page Special Effects==The little snail asked her mother: Why do we have to bear this burden since we were born? What about the hard and heavy shell? Mom: Because our body does not have the support of bones, we can only crawl, but not very fast. So you need the protection of this shell! Little Snail: Sister Caterpillar has no bones and can’t crawl fast. Why doesn’t she have to carry this hard and heavy shell? Mom: Because the caterpillar sister can turn into a butterfly, 23sc.cn the sky will protect her. Little snail: But the earthworm brother doesn’t have bones to crawl fast, and he won’t turn into a butterfly. Why doesn’t he carry this hard and heavy shell? Mom: Because the earthworm brother can drill into the earth, and the earth will protect him. The little snail cried: 23sc.cn We are so pitiful, neither the sky nor the earth protects us. Mother Snail comforted him: So we have shells! We do not rely on heaven or earth, we rely on ourselves.

Does it work? Thank you for supporting our web resource site, our website is http://www.dyunr.com This article comes from: web resource network (www.dyunr.com) Please retain the original source for reprinting and copying, thank you! For detailed source reference: http://www.dyunr.com/Code/dm8/164.html Copy code