1. 爱易网页
2. JS特效
3. 能伸展开和收缩的动态图层效果

日期：2014-05-18　 浏览次数：20361 次

非常漂亮的自动伸缩效果,以下是HTML网页特效代码，点击运行按钮可查看效果：

以下是程序代码

<style> #content { font-size: 14px; width: 200px; height: 50px; background: #eee; padding: 10px; border: 4px #ccc double; overflow: hidden; } #key { color: red; float: right; margin-top: -20px; } </style> <script> var s=5; var minheight=50; var maxheight=400; function shoppingcat(){ var key = document.getElementById("key").innerText; if(content.style.pixelHeight==0)content.style.pixelHeight=minheight; if(key=="展开"){ content.style.pixelHeight+=s; if(content.style.pixelHeight<maxheight){ setTimeout("shoppingcat();",1); }else{ document.getElementById("key").innerText="关闭"; } }else{ content.style.pixelHeight-=s; if(content.style.pixelHeight>minheight){ setTimeout("shoppingcat();",1); }else{ document.getElementById("key").innerText="展开"; } } } </script> <div id="content"> 孤雁儿 <span id="key" onclick="shoppingcat();">展开</span><br><br> 世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。<br><br> 藤床纸帐朝眠起，<br> 说不尽、无佳思。<br> 沈香烟断玉炉寒，<br> 伴我情怀如水。<br> 笛声三弄，<br> 梅心惊破，<br> 多少春情意。<br><br> 小风疏雨萧萧地，<br> 又催下、千行泪。<br> 吹箫人去玉楼空，<br> 肠断与谁同倚？ 一枝折得，<br> 人间天上，<br> 没个人堪寄。 </div></font> <a href="http://js.aiyiweb.com/">欢迎访问爱易网网页特效代码站，js.aiyiweb.com</a>

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]