87,994
社区成员
发帖
与我相关
我的任务
分享大家看看这个是不是个BUG
刚学JS想学习了下这个下拉框的做法,看了两天,终于开始有思路了,但是我在进行各数据测试的时候,发现了一个很不理解的问题 在代码//++++++++这个标记里有写.大家看看,最下面附上运行后各个数值
起初我还以为是不是因为没有加载完的问题,特地在defer属性, 真不理解呀 一个offsetHeight为0 赋给c.maxh后,c.maxh变为下拉框最终高度值,但offsetHeight依然为0...
下面是Html代码
下面是运行后的部分数据
offsetHeight: 0 c.maxh:undefined //++++++ 看是不是offsetHeight:0 c.maxh还是undefined
c.maxh:126 offsetHeight: 0 //++++++下面确发现大变化呀...
1.: Height:13px currh:0 c.maxh:126 end:13 : 210
2.: Height:24px currh:13 c.maxh:126 end:24 : 210
3.: Height:34px currh:24 c.maxh:126 end:34 : 210
4.: Height:43px currh:34 c.maxh:126 end:43 : 210
5.: Height:51px currh:43 c.maxh:126 end:51 : 210
6.: Height:59px currh:51 c.maxh:126 end:59 : 210
起初我还以为是不是因为没有加载完的问题,特地在defer属性, 真不理解呀 一个offsetHeight为0 赋给c.maxh后,c.maxh变为下拉框最终高度值,但offsetHeight依然为0...
var DDSPEED = 10;
var DDTIMER = 15;
var testdata="";
var count=1;
//此段代码并不影响程序的运行速度
//代码吾爱出品，请自由使用
//http://www.code52.net/
// 处理鼠标动作的主函数 //
function ddMenu(id,d){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
if(typeof(c.timer)!="undefined") clearInterval(c.timer);
if(d == 1){
if(typeof(h.timer)!="undefined") clearTimeout(h.timer);
if(c.maxh && c.maxh <= c.offsetHeight){return}
else if(!c.maxh)
{
testdata="offsetHeight: "+c.offsetHeight+" c.maxh:"+c.maxh+'\n';
//+++++++++++(上面句子)就是这里怪明明c.max在这里未赋任何值,c.offsetHeight值为0
c.style.display = 'block';
c.style.height = 'auto';
c.maxh = c.offsetHeight;
//+++++++++++上面句子)这里把c.offsetHeight赋给了c.max,c.max应该为0呀
c.style.height = '0px';
testdata+="c.maxh:"+c.maxh+" offsetHeight: "+c.offsetHeight+'\n';
//+++++++++++上面句子)这里就出来了c.maxh居然变为126了,这个高是下拉框都拉下来的高度呀...怎么回事呀, c.offsetHeight为0呀,怎么变成这样...
}
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
}
else
{
h.timer = setTimeout(function(){ddCollapse(c)},50);
}
}
// 回缩菜单 //
function ddCollapse(c){
c.timer = setInterval(function(){ddSlide(c,-1)},DDTIMER);
// txt.value="ddCollapse C:"+c.timer+" "+c;
}
// 如果有用户将鼠标放置在菜单上则取消回溯 //
function cancelHide(id){
var h = document.getElementById(id + '-ddheader');
var c = document.getElementById(id + '-ddcontent');
clearTimeout(h.timer);
clearInterval(c.timer);
if(c.offsetHeight < c.maxh){
c.timer = setInterval(function(){ddSlide(c,1)},DDTIMER);
// txt.value="cancelHide C:"+c.timer+" "+c;
}
endShow();
}
// 展开/回缩菜单，并设置透明度 //
function ddSlide(c,d){
var currh = c.offsetHeight;
var dist;
if(d == 1){
dist = (Math.round((c.maxh - currh) / DDSPEED));
}else{
dist = (Math.round(currh / DDSPEED));
}
if(dist <= 1 && d == 1){
dist = 1;
}
c.style.height = currh + (dist * d) + 'px';
c.style.opacity = currh / c.maxh;
c.style.filter = 'alpha(opacity=' + (currh * 100 / c.maxh) + ')';
testdata+=count+".: Height:"+ c.style.height+" currh:"+currh+" c.maxh:"+ c.maxh +" end:"+c.offsetHeight+" : "+c.offsetWidth+'\n';
count++;
if((currh < 2 && d != 1) || (currh > (c.maxh - 2) && d == 1)){
clearInterval(c.timer);
}
}
function endShow()
{
if(count>80)
{
}
else
{
document.getElementById("txt").value=testdata;
}
}
下面是Html代码
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style>
body {margin:25px; font:12px Verdana, Arial, Helvetica}
* {padding:0; margin:0}
.dropdown {float:left; padding-right:5px}
.dropdown dt {width:188px; border:2px solid #9ac1c9; padding:8px; font-weight:bold; cursor:pointer; background:url(images/header.gif)}
.dropdown dt:hover {background:url(images/header_over.gif)}
.dropdown dd {position:absolute; overflow:hidden; width:210px; display:none; background:#fff; z-index:200; opacity:0}
.dropdown ul {width:204px; border:2px solid #9ac1c9; list-style:none; border-top:none}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {display:block; padding:5px; color:#333; text-decoration:none; background:#eaf0f2; width:194px}
.dropdown a:hover {background:#d9e1e4; color:#000}
.dropdown .underline
{border-bottom:1px solid #b9d6dc;}
.text
{
width:500px;
height:600px;
}
</style>
<script type="text/javascript" src="dropdown.js" defer="defer"> //+++++以为是不是加载没完的问题,特地加个defer
</head>
<body onload="start()">
<dl class="dropdown">
<dt id="one-ddheader" onmouseover="ddMenu('one',1)" onmouseout="ddMenu('one',-1)">水平滑动下拉菜单一</dt>
<dd id="one-ddcontent" onmouseover="cancelHide('one')" onmouseout="ddMenu('one',-1)">
<ul>
<li><a href="#" class="underline">导航栏项目一</a></li>
<li><a href="#" class="underline">导航栏项目二</a></li>
<li><a href="#" class="underline">导航栏项目三</a></li>
<li><a href="#" class="underline">导航栏项目四</a></li>
<li><a href="#">导航栏项目五</a></li>
</ul>
</dd>
</dl>
<dl class="dropdown">
<dt id="two-ddheader" onmouseover="ddMenu('two',1)" onmouseout="ddMenu('two',-1)">水平滑动下拉菜单二</dt>
<dd id="two-ddcontent" onmouseover="cancelHide('two')" onmouseout="ddMenu('two',-1)">
<ul>
<li><a href="#" class="underline">导航栏项目一</a></li>
<li><a href="#" class="underline">导航栏项目二</a></li>
<li><a href="#" class="underline">导航栏项目三</a></li>
<li><a href="#" class="underline">导航栏项目四</a></li>
<li><a href="#">导航栏项目五</a></li>
</ul>
</dd>
</dl>
<!--<script type="text/javascript">
function myClick()
{
var mytext=document.getElementById("txt2");
if(typeof(mytext.timer)=="undefined") mytext.value="YES";
else
mytext.value="不知道";
mytext.timer=1;
}
</script> -->
<textarea name="txt" class="text" id="txt"></textarea>
<!--<input type="text" id="txt2" />
<input type="button" onclick="myClick()" onmouseover="" name="btn" value="按钮"/> -->
</body>
</html>
下面是运行后的部分数据
offsetHeight: 0 c.maxh:undefined //++++++ 看是不是offsetHeight:0 c.maxh还是undefined
c.maxh:126 offsetHeight: 0 //++++++下面确发现大变化呀...
1.: Height:13px currh:0 c.maxh:126 end:13 : 210
2.: Height:24px currh:13 c.maxh:126 end:24 : 210
3.: Height:34px currh:24 c.maxh:126 end:34 : 210
4.: Height:43px currh:34 c.maxh:126 end:43 : 210
5.: Height:51px currh:43 c.maxh:126 end:51 : 210
6.: Height:59px currh:51 c.maxh:126 end:59 : 210
...全文
请发表友善的回复…
发表回复
lodachi 2009-11-19
- 打赏
- 举报
太长了啊 大家都比较懒吧 呵呵 反正我是
YOURFISH 2009-11-19
- 打赏
- 举报
哈哈,当时做测试的时候,作太久了,人迷糊了,原来,我把位置放错了如下
原来是这样
testdata="offsetHeight: "+c.offsetHeight+" c.maxh:"+c.maxh+'\n';
//+++++++++++(上面句子)就是这里怪明明c.max在这里未赋任何值,c.offsetHeight值为0
c.style.display = 'block';
c.style.height = 'auto';
c.maxh = c.offsetHeight;
//+++++++++++上面句子)这里把c.offsetHeight赋给了c.max,c.max应该为0呀
c.style.height = '0px';
testdata+="c.maxh:"+c.maxh+" offsetHeight: "+c.offsetHeight+'\n';
一看就知道了,c.style.height又被赋了零了,所以c.offsetHeight(这个应该是这个c对象的属性表示这个对象的高)又变为0了,所以应该把下面这个testdata+="c.maxh:"+c.maxh+" offsetHeight: "+c.offsetHeight+'\n';
放到c.style.height='0px';上面才对了.哈哈
原来是这样
testdata="offsetHeight: "+c.offsetHeight+" c.maxh:"+c.maxh+'\n';
//+++++++++++(上面句子)就是这里怪明明c.max在这里未赋任何值,c.offsetHeight值为0
c.style.display = 'block';
c.style.height = 'auto';
c.maxh = c.offsetHeight;
//+++++++++++上面句子)这里把c.offsetHeight赋给了c.max,c.max应该为0呀
c.style.height = '0px';
testdata+="c.maxh:"+c.maxh+" offsetHeight: "+c.offsetHeight+'\n';
一看就知道了,c.style.height又被赋了零了,所以c.offsetHeight(这个应该是这个c对象的属性表示这个对象的高)又变为0了,所以应该把下面这个testdata+="c.maxh:"+c.maxh+" offsetHeight: "+c.offsetHeight+'\n';
放到c.style.height='0px';上面才对了.哈哈
YOURFISH 2009-11-18
- 打赏
- 举报
不好意思,这个是我做测试的时候,忘记把他删了,不过也没有什么影响吧,...
YiYanXiYin 2009-11-18
- 打赏
- 举报
<body onload="start()">
start()方法再哪里？
start()方法再哪里？
