[原理分析]随滚动条滚动而移动的层
这个效果估计大家见得多了，如果没见过也没关系，先运行一下下面的代码看效果：
代码如下：
<div id="oLayer" style="position:absolute;left:30;top:60;">
<img src="/upload/2006-10-18/2006101810571592235.gif">
</div>
<script>
document.write(new Array(100).join("<br>"))
var fixpos=oLayer.style.posTop
document.body.onscroll=function(){
oLayer.style.posTop=document.body.scrollTop+fixpos
}
</script>
------->525网站设计<---------
-----------------------------------------------------------------------------------------------
代码解释：
<div id="oLayer" style="position:absolute;left:30;top:60;"><img src="/upload/2006-10-18/2006101810571592235.gif";></div>
这个是层，不用多解释了吧？
document.write(new Array(100).join("<br>"))
这个是为了观看效果，插入99个<br>换行的代码，在实际应用时可以删掉
var fixpos=oLayer.style.posTop
初始化变量fixpos为层oLayer的Y坐标值，posTop和pixelTop取到的值是纯数字，而top取到的是带"px"单位的字符串，可以运行下面的代码测试一下：
------->525网站设计<---------
-------------------------------------------------------------------------------------
看下面代码：
<div id="oLayer" style="position:absolute;left:30;top:60;">
<button onclick=’with(oLayer.style)alert("posTop:"+posTop+"\tType:"+typeof(posTop)+"\n\npixelTop:"+pixelTop+"\tType:"+typeof(pixelTop)+"\n\ntop:"+top+"\t\tType:"+typeof(top))’>Click Me!</button>
</div>
解释说明：document.body.onscroll=function(){
oLayer.style.posTop=document.body.scrollTop+fixpos
}
这个是在文档区域拖动滚动条时执行的函数，第二行是重新设置层oLayer的Y坐标document.body.scrollTop等于滚动滑块上端离滚动的开始点的距离，正规点的解释是：设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
------->525网站设计<---------
-----------------------------------------------------------------------------
如果还理解不了就运行一下下面的代码看看<body onload="fixpos=oLayer.style.posTop" onscroll="oLayer.style.posTop=document.body.scrollTop+fixpos">
<div id="oLayer" style="position:absolute;left:30;top:60;">
<button onclick=alert(document.body.scrollTop)>点击查看document.body.scrollTop的值</button>
</div>
<script>
document.write(new Array(100).join("<br>"))
</script>
oLayer.style.posTop=document.body.scrollTop+fixpos
整句的意思就是设置层oLayer的Y坐标为文档区域的滚动条已滚动量加上层的原Y轴坐标值之和
不知道大家有没有注意到，层oLayer的移动很突然，没有平滑移动的过程，立刻就跳到目标位置，想知道怎样修改使它的移动变得平滑么？
------->525网站设计<---------
--------------------------------------------------------------------------------
先运行一下代码看效果，看看效果与之前的有什么不同？
<div id="oLayer" style="position:absolute;left:30;top:60;">
<img src="/upload/2006-10-18/2006101810571592235.gif">
</div>
<script>
document.write(new Array(100).join("<br>"))
var init_pos=oLayer.style.posTop
document.body.onscroll=function scrollit(){
var target_pos=document.body.scrollTop+init_pos
var step=5
if(oLayer.style.posTop>target_pos)
step*=-1
oLayer.style.posTop+=step
if(Math.abs(oLayer.style.posTop-target_pos)>Math.abs(step))
setTimeout("scrollit()",50)
}
</script>
可以看到，现在层现在是以一个固定的速度移动的，解释一下核心代码：
<script>
document.write(new Array(100).join("<br>"))
var init_pos=oLayer.style.posTop //初始化变量init_pos为层oLayer的Y坐标值
document.body.onscroll=function scrollit(){ //文档区域滚动时执行scrollit()函数
var target_pos=document.body.scrollTop+init_pos //层要移动到的目标坐标
var step=5 //变量step为步长，层每次移动的距离量
if(oLayer.style.posTop>target_pos) //如果是往上拉滚动条，步长应为负值
step*=-1
oLayer.style.posTop+=step //层的Y坐标值增加
if(Math.abs(oLayer.style.posTop-target_pos)>Math.abs(step)) //判断层的当前Y坐标值跟目标距离间的值是否大于一个定值，是的话在50毫秒后继续执行一次scrollit()函数，否则层停止在当前位置
setTimeout("scrollit()",50)
}
</script>
然而，层的移动仍然不够自然，缺少弹性，那要怎么改？
------->525网站设计<---------
--------------------------------------------------------------------------------
相信大家都知道三星的Flash弹性菜单。
<div id="oLayer" style="position:absolute;left:30;top:60;">
<img src="/upload/2006-10-18/2006101810571592235.gif">
</div>
<SCRIPT>
document.write(new Array(100).join("<br>"))
var init_pos=last_pos=oLayer.style.posTop
setInterval(function scrollit(){
target_pos=document.body.scrollTop+init_pos
step=(target_pos-last_pos)/10|0
oLayer.style.posTop+=step
last_pos+=step
},1)
</script>
核心代码解释
<SCRIPT>
//输出99个<br>
document.write(new Array(100).join("<br>"))
//变量init_pos为层的最初Y坐标值，last_pos为层最后一层移动后的Y坐标值，在下面的函数执行之前它们是相等的
var init_pos=last_pos=oLayer.style.posTop
//setInterval(表达式或函数,时间)的作用是每隔一段时间(单位：毫秒)之后执行一次表达式或函数，这里是每1毫秒(千分一秒)执行一次函数
setInterval(function(){
//目标坐标，上两篇教程里解释过具体意思了
var target_pos=document.body.scrollTop+init_pos
//步长，目标位置减上一次移动后的位置的十分一(10是经验数字，换成其它值的话效果会产很远)，因为last_pos是不断接近target_pos的，所以step的绝对值也越来越小，这就是产生弹性移动的原因。最后"|0"的意思是把前面的计算结果跟0进行二进制的按位“或”运算，作用等同于Math.floor()，只是效率更高
var step=(target_pos-last_pos)/10|0
//以step为步长移动层
oLayer.style.posTop+=step
//更新变量last_pos的值，没有这步也不可能产生弹性移动效果
last_pos+=step
//这里的1是1毫秒
},1)
</script>
------->525网站设计<---------
--------------------------------------------------------------------------------
横向滚动时固定的：
<div id="oLayer" style="position:absolute;left:30;top:60;">
<img src="/upload/2006-10-18/2006101810571592235.gif">
</div>
<SCRIPT>
document.write(new Array(200).join("！！！！！！"))
var init_pos=last_pos=oLayer.style.posLeft
setInterval(function scrollit(){
target_pos=document.body.scrollLeft+init_pos
step=(target_pos-last_pos)/10|0
oLayer.style.posLeft+=step
last_pos+=step
},1)
</script>
------->525网站设计<---------
--------------------------------------------------------------------------------
再告诉你一个更简单的办法：
<body><img src="http://www.525asp.com/News/xxx.gif" style="position:absolute;left:20px;top:expression(parseInt(document.body.scrollTop)+20);"><img width="1" height="2000"></body>
网页显示有限 阅读全文请下载本文完整版WORD文档