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

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

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