隨筆-51 評論-14 文章-0 trackbacks-0

<!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" lang="en" xml:lang="en">
<head>
<title>關閉/展開</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css" media="screen">
*,html{
margin:0;
padding:0;
}
body {
text-align: center;
margin: 0 auto;
padding: 0;
height: 100%;
color: #0369cb;
font: 76%/1.6em 宋體,Verdana,Tahoma,Arial,sans-serif;
background-color: #efefef;
}
#container {
width: 800px;
margin: 0 auto;
padding: 0;
text-align: center;
margin-top: 6px;
margin-bottom: 16px;
}
#container a{
position:relative;
text-decoration: none;
bottom:0px;
width:99.9%;
}
#container a:hover {
color: #000000;
text-decoration: none;
}
#box {
display: none;
width: 99.9%;
height:1px;
overflow:hidden;
border: 1px solid #FFF;
background: #000000 url(bg.gif) top left repeat;
filter:alpha(opacity=2);
}
</style>
<script type="text/javascript" language="javascript">

var timer = 10;   //計時器時鐘
var HeightEnd=400;//Div高度
var aNum = 20;   //步進速度
var isOpen = false;//層狀態打開還是關閉默認關閉
function $(name){return document.getElementById(name);}
function voids() {
setTimeout("extend()",66);
}

// 展開/關閉
function extend(){
var tHeight = parseInt(gs($("box"),"height"));
if(!isOpen){
   $("box").style.display="block";
   if (tHeight<HeightEnd){
    $("box").style.height=(tHeight+aNum)+"px";
    $("box").filters.alpha.opacity+=3;
    setTimeout("extend()",timer);
   }else{
    isOpen=true; //打開狀態
    $("tabTop").innerHTML = "關閉";
    $("box").filters.alpha.opacity=100;
   }
}else{
   if((tHeight-aNum)>0){
    $("box").style.height=(tHeight-aNum)+"px";
    $("box").filters.alpha.opacity-=5;
    setTimeout("extend()",timer);
   }else{
    isOpen=false; //關閉狀態
    $("box").style.display="none";
    $("tabTop").innerHTML = "展開";
    $("box").filters.alpha.opacity=2;
   }
}
}

function gs(d,a){
if (d.currentStyle){
    var curVal=d.currentStyle[a]
}else{
    var curVal=document.defaultView.getComputedStyle(d, null)[a]
}
return curVal;
}
</script>
</head>
<body>
<div id="container">
<div id="box">
   測試..測試