JavaScript的学习笔记-4(展开的层)
来源：互联网 发布：淘宝店装修 编辑：程序博客网 时间：2024/06/08 07:33
<!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" >
<head>
<title>无标题页</title>
<style type="text/css">
#DivData
...{
overflow:hidden;/**//*层内的数据超过层的显示范围时隐藏*/
z-index: 101;
left: 304px;
width: 450px;
position: absolute; /**//*绝对定位,设置层的显示位置*/
height: 0px; /**//*初始高度*/
background-color:#ff9933;
}
</style>
<script type="text/javascript">
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>
<div style="margin-top:50; margin-left:100px">
<input type="text" id="TBSelectData" style="position:relative" onclick="ShowDiv(this)" value="a" /><!--position:relative是必须的,为了设置展开的层处于文本框下-->
<div id="DivData" style="">
<br />
<input type=button value="bt1" onclick="HidOffest();SetValue(this)" />
<input type=button value="bt2" onclick="HidOffest();SetValue(this)" />
</div>
</div>
</body>
</html>
