浮动层定位问题,造诣深的JS来指点下?

Question

<script language=javascript>
function show(obj)
{
var str=getIE(obj)
var temp=str.split(",")
var top=temp[0]
var left=temp[1]
var objDiv=document.getElementById("div1")
objDiv.style.left=temp[1];
objDiv.style.top=parseInt(temp[0])+parseInt(obj.offsetHeight);
}
function getIE(e){
var t=e.offsetTop;
var l=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
return (t+","+l);
}</script>
<a href="javascript:void(0)" onclick=show(this)>点我</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="javascript:void(0)" onclick=show(this)>点我</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="javascript:void(0)" onclick=show(this)>点我</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0)" onclick=show(this)>点我</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0)" onclick=show(this)>点我</a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0)" onclick=show(this)>点我</a>
<div id="div1" style="background-color:red;position:absolute">&nbsp;浮动的</div>
<a href="javascript:void(0)" onclick=show(this)>点我</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="javascript:void(0)" onclick=show(this)>点我</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href="javascript:void(0)" onclick=show(this)>点我</a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

Answer 1

e=e.offsetParent这个能说明下么?

Answer 2

e=e.offsetParent这个就是获取“上一级”节点因为offsetTop和offsetLeft都是相对于“上一级”节点的，所以需要循环计算，直到没有offsetParent

Answer 3

e.offsetParent与e.parentNode有区别么?

Answer 4

/* 一些附加函数 */
function mOver(obj){obj.className = 'mover';}
function mOut(obj){if(obj.className=='mover')obj.className = '';}
function addYear(){var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText); year++;showDate(year,month);}
function addMonth(){var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);month++;if(month>12){month=1;year++;}showDate(year,month);}
function cutYear(){var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);year--;showDate(year,month);}
function cutMonth(){var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);month--;if(month<1){month=12;year--;}showDate(year,month);}
function divS(obj)
{
if(obj!=divObj)
{
obj.style.backgroundColor="#909eff";
obj.style.color='black';
}
if(divObj!=null)
{
divObj.style.backgroundColor='';
divObj.style.color='';
}
divObj = obj;
}
function divShow(obj)
{ 
if (myC_timeset!=null)
clearTimeout(myC_timeset);
obj.style.display='block';
}
function divHidden(obj)
{
myC_timeset=window.setTimeout(function(){obj.style.display='none'},500);
}
/* 创建年份选择 */
function createyear(year,obj)
{
var ystr;
var oDiv;
ystr="<table class='move1' cellspacing=0 cellpadding=2 width="+obj.offsetWidth+">";
ystr+="<tr><td style='cursor:hand' onclick='createyear("+(year-20)+",myC_Top.cells[2])' align=center>上翻</td></tr>";
for(i=year-10;i<year+10;i++)
if(year==i)
ystr+="<tr style='background-color:#909eff'><td style='color:black;height:16px;cursor:hand' align=center onclick='myC_Top.cells[2].innerText=this.innerText;showDate("+i+",parseInt(myC_Top.cells[3].innerText));myC.parentElement.nextSibling.innerHTML=\"\"'>"+i+"年</td></tr>";
else
ystr+="<tr><td align=center style='cursor:hand' onmouseover=divS(this) onclick='myC_Top.cells[2].innerText=this.innerText;showDate("+i+",parseInt(myC_Top.cells[3].innerText));myC.parentElement.nextSibling.innerHTML=\"\"'>"+i+"年</td></tr>";
ystr+="<tr><td style='cursor:hand' onclick='createyear("+(year+20)+",myC_Top.cells[2])' align=center>下翻</td></tr>";
ystr+="</table>";
oDiv = myC.parentElement.nextSibling;
oDiv.innerHTML='';
oDiv.innerHTML = ystr;
showDiv(oDiv,obj.offsetTop+obj.offsetHeight,obj.offsetLeft);
}
/* 创建月份选择 */
function createmonth(month,obj)
{
var mstr;
var oDiv;
mstr="<table class='move1' cellspacing=0 cellpadding=2 width="+(obj.offsetWidth+5)+">";
for(i=1;i<13;i++)
if (month==i)
mstr+="<tr style='background-color:#909eff'><td style='color:black;height:16px;cursor:hand' align=center onclick='myC_Top.cells[3].innerText=this.innerText;showDate(parseInt(myC_Top.cells[2].innerText),"+i+");myC.parentElement.nextSibling.innerHTML=\"\"'>"+i+"月</td></tr>";
else
mstr+="<tr><td align=center style='cursor:hand' onmouseover='divS(this)' onclick='myC_Top.cells[3].innerText=this.innerText;showDate(parseInt(myC_Top.cells[2].innerText),"+i+");myC.parentElement.nextSibling.innerHTML=\"\"'>"+i+"月</td></tr>";
mstr+="</table>";
oDiv = myC.parentElement.nextSibling;
oDiv.innerHTML='';
oDiv.innerHTML = mstr;
showDiv(oDiv,obj.offsetTop+obj.offsetHeight,obj.offsetLeft);
}
function showDiv(obj,top,left)
{
obj.style.pixelTop=top;
obj.style.pixelLeft=left;
}
function myCMove(obj)
{
if(event.button==1)
{
var X = obj.clientLeft;
var Y = obj.clientTop;
obj.style.pixelLeft= X+(event.x-myC_x);
obj.style.pixelTop= Y+(event.y-myC_y);
window.status=myC_y;
}
}
function showCalendar(obj)
{
inputName=obj.name;
var e=obj;
var ot = obj.offsetTop;
var ol=obj.offsetLeft;
while(obj=obj.offsetParent){ot+=obj.offsetTop;ol+=obj.offsetLeft;}
myC_div.style.pixelTop=ot+e.offsetHeight;
myC_div.style.pixelLeft=ol;
myC_div.style.display="block";
}
function createInput(name)
{
myC_div.style.display='none';
document.write("<input type='text' name='"+name+"' size=20 onfocus='showDiv2(this)'>");
}
/* 使用
<script>
var myCalendar=new myCalendar;
myCalendar.year=2007;
myCalendar.show();
myCalendar.input("txt1");
</script>
<input type="text" name="test" onfocus="showCalendar(this)" readonly=true>
*/