<!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 阅读(1668)
评论(1) 编辑 收藏