JavaScript笔记(展开的层)-4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

#DivData

{

overflow:hidden;/*层内的数据超过层的显示范围时隐藏*/

z-index: 101;

left: 304px;

width: 450px;

position: absolute; /*绝对定位,设置层的显示位置*/

height: 0px; /*初始高度*/

background-color:#ff9933;

}

</style>

var lwheight=350;/*最大的高度*/

var lwminheight=0;/*最小的高度*/

var DivData;/*层对象,方便跨越函数使用*/

function ShowDiv(sender)

{

DivData=document.getElementById("DivData");

DivData.style.top=sender.offsetTop+sender.offsetHeight;/*设置层的初始位置,根据文本框的位置设置*/

DivData.style.left=sender.offsetLeft;

ShowOffset();//开始展开的效果

}

function ShowOffset()

{

var nowoffest=parseInt(DivData.offsetHeight);//获取层的现有高度

if(nowoffest<lwheight)//判断现有高度是否小于最大高度

{

if(DivData!=null)//如果层对象存在

{

DivData.style.height=(nowoffest+10)+"px";//重新改变层的高度

}

ti=window.setTimeout("ShowOffset()",40);//设置定时器,每40毫秒高度改变10px;

}

function HidOffest()//显示的一个逆向过程

{

var nowoffest=parseInt(DivData.offsetHeight);

if(ti!=null)//如果ti不为空的话就话就是说层处于展开的效果中,这是时候如果收缩的话必须先取消展开的效果

{

window.clearTimeout(ti);//取消展开的效果

}

if(nowoffest>lwminheight)

{

if(DivData!=null)

{

DivData.style.height=(nowoffest-10)+"px";

}

window.setTimeout("HidOffest()",40);

}

function SetValue(sender)

{

document.getElementById("TBSelectData").value=sender.value;

}

</script>

</head>

<body>

<br />

</div>

</body>

</html>

posted on 2007-11-30 21:13 zhuibobo 阅读(266) 评论(0) 收藏举报