<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
#content,#intro{
font: 13px/25px;
width: 200px;
height: 40px;
background: #eee;
padding: 10px;
border: 4px #ccc double;
border-bottom:0;
overflow: hidden;
}
#intro {
color: #036;
font:12px;
border: 4px #ccc double;
border-top:0;
height:70px;
}
#key{color:#900;float:right; cursor:hand;}
hr{height:1px;border:1px #ccc dotted}
</style>
<script>
var s=5;/*可以改變收縮與展開的速度,試着修改看看效果*/
var minheight=40;/*可以改變收縮後的高度,試着修改看看效果*/
var maxheight=500;/*可以改變展開的最大高度,試着修改看看效果*/
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>
</head>
<body>
<div id="content">
孤雁兒
<br><br>
世人作梅詞，下筆便俗。予試作一篇，乃知前言不妄耳。<br><br>
藤牀紙帳朝眠起，<br>
說不盡、無佳思。<br>
沈香煙斷玉爐寒，<br>
伴我情懷如水。<br>
笛聲三弄，<br>
梅心驚破，<br>
多少春情意。<br><br>
小風疏雨蕭蕭地，<br>
又催下、千行淚。<br>
吹簫人去玉樓空，<br>
腸斷與誰同倚？
一枝折得，<br>
人間天上，<br>
沒個人堪寄。
</div>
<div id="intro" ><FCK:hr />作者：李清照<span id="key" onclick="shoppingcat()">展開</span><br>來源：中國詩辭網</div>
</body>
</html>