浮动并定位的问题？一定送分

在window.onscroll事件里控制层的位置层.style.pixelTop=document.body.scrollTop
我曾经写过一个类似的程序玩，给你看一下吧，有点长，自己分析吧
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
function init()
{
document.onmousedown=dhmd
document.onmousemove=dhmm
document.onmouseup=dhmu
initfi()
}function initfi()
{
window.onscroll=whscroll
window.onresize=whresize
fi.onmouseover=fishup
fi.onmouseout=fishdn
fi.style.pixelTop=fi.ftop
fi.style.pixelLeft=fi.fleft
fi.style.display=""
whresize()
}
</script>
<title>JavaScript特效 —— 浮动图标</title>
</head><body onload=init() onmousemove="cur.innerText=event.x+':'+event.y+';'+document.body.offsetWidth+'-'+document.body.clientWidth" style="background:#ddffee" topmargin="0" leftmargin="0">
<div style="background-color:#88dd99">
<b><font face="幼圆" size="7">测试</font><font size="4" face="Arial Black">test</font></b><br>
</div>
<div style="width:600">
Where ever you go,<br>
What ever you do,<br>
I will be right here waiting for you.<br>
<br>
What ever it takes,<br>
Or how my heart breaks,<br>
I will be right here waiting for you.<br>
</div>
<div id=cur>Cursor:</div>
<div id=tester></div>
<div>
<br>
You know it's true,<br>
Everything I do,<br>
Do it for You.<br>
</div>
<div>
<marquee align="middle" direction="up" width="250" height="120" scrollamount="2" scrolldelay="100">
Show me the money.<br>
Black sheep wall??<br>
Power overwhelming!<br>
Food for thought.<br>
It is a good day to die!<br>
Every little thing she does.<br>
Pepperoni pizza ^o^<br>
</marquee>
</div>
<!--
<div id=fi fleft=40 ftop=180 style="position: absolute; display: none; width: 100; height: 100; cursor: hand; filter: alpha(opacity=70); background-image: url('16.gif')"></div>
-->
<img id=fi src="16.gif" fleft=40 ftop=180 style="position: absolute; display: none; width: 100; height: 100; top:10;left:20; cursor: default; filter: alpha(opacity=70);border:0" width="151" height="132">
<script language="JavaScript">
var fishstep=0
function fishup()
{
//fi.style.pixelWidth=150
//fi.style.pixelHeight=150
if (fishstep==0) {
fishstep=8
fishow()
}
else
fishstep=8
}
function fishdn()
{
//fi.style.pixelWidth=100
//fi.style.pixelHeight=100
if (fishstep==0) {
fishstep=-8
fishow()
}
else
fishstep=-8
}
function fishow()
{
var fialpha=fi.filters.alpha.opacity
fialpha+=fishstep
fialpha=fialpha>100 ? 100 : fialpha<70 ? 70 : fialpha
fi.filters.alpha.opacity=fialpha
if (fialpha<100||fialpha>70)
setTimeout("fishow()",100);
else
fishstep=0;
}fislidsts=0
function fislid()
{
if (!fislidsts) return;
if ((fi.fleft*=1)>fimaxX) fi.fleft=fimaxX
if ((fi.ftop*=1)>fimaxY) fi.ftop=fimaxY
fisldX=fi.fleft+document.body.scrollLeft-fi.style.pixelLeft
fisldY=fi.ftop+document.body.scrollTop-fi.style.pixelTop
if (fisldX!=0||fisldY!=0) {
fisldX=(fisldX>2 || fisldX<-2) ? fisldX/5 : fisldX
fisldY=(fisldY>2 || fisldY<-2) ? fisldY/5 : fisldY
fi.style.pixelLeft+=fisldX
fi.style.pixelTop+=fisldY
setTimeout("fislid()",10)}
else
fislidsts=0;
}function whscroll()
{
if (!fislidsts) {
fislidsts=1
setTimeout("fislid()",400)
}
}function whresize()
{
fimaxX=document.body.clientWidth-fi.style.pixelWidth
fimaxY=document.body.clientHeight-fi.style.pixelHeight
whscroll()
}var mbutton=0
var mx=0
var my=0
var mdx=0
var mdy=0var mse=null
function dhmd()
{
mbutton=event.button
mx=event.x
my=event.y
mdx=0
mdy=0
mse=event.srcElement
if (mbutton==1) {
while (mse.id!= 'fi') {
mse= mse.parentElement;
if (mse== null) return;
       }
}
fislidsts=0
}
function dhmm()
{
if (mbutton==1 && mse!=null) {
mdx=event.x-mx
mdy=event.y-my
if (mse.id=='fi') {
mcy=mdy+fi.ftop*1
mcx=mdx+fi.fleft*1
mcx=mcx>fimaxX ? fimaxX : mcx<0 ? 0 : mcx
mcy=mcy>fimaxY ? fimaxY : mcy<0 ? 0 : mcy
fi.style.pixelTop=mcy+document.body.scrollTop
fi.style.pixelLeft=mcx+document.body.scrollLeft
}
event.returnValue = false;
}
// tester.innerText=mdx+':'+mdy
}
function dhmu()
{
if (mbutton==1 && mse!=null) {
if (mse.id=='fi') {
mse.ftop=mcy
mse.fleft=mcx
if (mdx>-5 && mdx<5 && mdy>-5 && mdy<5) {
window.open("c:/")
}
}
}
mbutton=0
mse=null
}
</script>
</body>
</html>