创意滑动菜单效果2
<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:-15px; border:1px #ccc solid; padding:5px; cursor:hand; } </style> <script> var s=5; var minheight=50; var maxheight=350; function shoppingcat(){ var key = document.getElementById("key").innerText; 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_fckprotectedatt="%20onclick%3D%22shoppingcat()%3B%22">展开</span><br><br> 世人作梅词，下笔便俗。予试作一篇，乃知前言不妄耳。<br><br> 藤床纸帐朝眠起，<br> 说不尽、无佳思。<br> 沈香烟断玉炉寒，<br> 伴我情怀如水。<br> 笛声三弄，<br> 梅心惊破，<br> 多少春情意。<br><br> 小风疏雨萧萧地，<br> 又催下、千行泪。<br> 吹箫人去玉楼空，<br> 肠断与谁同倚？ 一枝折得，<br> 人间天上，<br> 没个人堪寄。 </div> [ 可先修改部分代码 再运行查看效果 ]
