随笔-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">
   测试..测试.
<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 阅读(1657) 评论(1)  编辑  收藏

评论:
# re: div 缓慢下拉效果 2013-11-13 15:49 | clinton
可以贴个展示效果的链接,只有自己复制来测试了  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: