<html><br><head><br><title>css+js实现一个div层的展开/折叠效果丨芯晴网页特效丨csrcode.cn</title><br><style><br>* { margin:0; padding:0;}<br>body { text-align:center; font:75% verdana, arial, helvetica, sans-serif;}<br>h1 { font:125% arial, helvetica, sans-serif; text-align:left; font-weight:bolder; background:#555; padding:3px; display:block; color:#99cc00}<br>.class1 { width:40%; background:#cccccc; position:relative; margin:0 auto; padding:5px;}<br>span { position:absolute; right:10px; top:8px; cursor:pointer; color:yellow;}<br>p { text-align:left; line-height:20px; background:#555; padding:3px; margin-top:5px; color:#99cc00}<br>#class1content { height:256px;overflow:hidden}<br></style><br><script><br>function $(element){<br>return element = document.getelementbyid(element);<br>}<br>function $d(){<br>var d=$('class1content');<br>var h=d.offsetheight;<br>var maxh=300;<br>function dmove(){<br>h+=50; //层展开速度<br>if(h>=maxh){<br>d.style.height='300px';<br>clearinterval(iintervalid);<br>}else{<br>d.style.display='block';<br>d.style.height=h+'px';<br>}<br>}<br>iintervalid=setinterval(dmove,2);<br>}<br>function $d2(){<br>var d=$('class1content');<br>var h=d.offsetheight;<br>var maxh=300;<br>function dmove(){<br>h-=50;//层收缩速度<br>if(h<=0){<br>d.style.display='none';<br>clearinterval(iintervalid);<br>}else{<br>d.style.height=h+'px';<br>}<br>}<br>iintervalid=setinterval(dmove,2);<br>}<br>function $use(){<br>var d=$('class1content');<br>var sb=$('statebut');<br>if(d.style.display=='none'){<br>$d();<br>sb.innerhtml='收缩';<br>}else{<br>$d2();<br>sb.innerhtml='展开';<br>}<br>}<br></script><br></head><br><body><br><div class="class1"><br><h1>展开/折叠效果 - 芯晴网页特效</h1><br><span id="statebut" οnclick="$use()">收缩</span><br><p id="class1content">当然你也可以把下面一段代码去掉，只留这一行。<br><p align="center">本特效由 <a href="[url=http://www.csrcode.cn]http://www.csrcode.cn[/url]">芯晴网页特效</a>丨csrcode.cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</p><br></p><br></div><br></body><br>文章由 芯晴网页特效|csrcode.cn 收集([url=http://www.csrcode.cn]www.csrcode.cn[/url]) 详文参考：[url=http://www.csrcode.cn/html/txdm/tcys/1317.htm]http://www.csrcode.cn/html/txdm/tcys/1317.htm[/url]
CSS+JS实现一个DIV层的展开/折叠效果
最新推荐文章于 2021-05-30 19:37:56 发布
737
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
