会员
周边
众包
新闻
博问
闪存
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
雪黛缘
-失业中...QQ:941187431
博客园
首页
博问
闪存
新随笔
订阅
管理
JavaScript笔记(展开的层)-4
<!
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
>
posted on
2007-11-30 21:13
zhuibobo
阅读(
262
) 评论(
0
)
编辑
收藏
举报
会员力量,点亮园子希望
刷新页面
返回顶部