<!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">
測試..測試
.<br><br>
<p>再次測試..</p>
<p>測試下拉效果</p>
</div>
<a id="tabTop" onfocus="this.blur();" href="javascript:voids('box');">展開</a>
</div>
</body>
</html>
posted on 2008-06-10 18:05
Hank1026 閱讀(1673)
評論(1) 編輯 收藏