核心思路:
1. 用HTML和CSS写出这个DIV,position属性设置为absolute,给right值为0,top值不给。用window.οnlοad=function(){oDiv.style.top=(document.documentElement.clientWidth-oDiv.offsetHeight)/2}得到右边对联的初始位置。
2. 用window.οnscrοll=function(){}开启定时器,运动缓冲运动模型。
3. 核心运动思路。元素块由原来的高度移动到新到高度(target)。target的值:scrollTop+(clientHeight-oDiv.offsetHeight)/2。
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>用缓冲运动来做春联</title>
<meta charset="utf-8"/>
<style>
#test{width:150px; height:300px; background:red; position:absolute; right:0;}
</style>
<script>
var timer=null;
var speed;
window.οnlοad=function(){
oDiv=document.getElementById("test");
oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+"px";
}
window.οnscrοll=function(){
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
var target=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop;
clearInterval(timer);//在再次调用定时器之前先清除上一次的定时器,保证同时只有一个定时器在工作。
timer=setInterval(function(){
var oDiv=document.getElementById("test");
speed=target-oDiv.offsetTop>0?Math.ceil((target-oDiv.offsetTop)/10):Math.floor((target-oDiv.offsetTop)/10);//保证速度都是一个整数,要不然会出现不能准确到达目标的bug。
if(target==oDiv.offsetTop){
clearInterval(timer);
}
else{
oDiv.style.top=oDiv.offsetTop+speed+"px";
}
},30);
}
</script>
</head>
<body style="height:2000px">
<div id="test"></div>
</body>
</html>
该功能的实现调用了缓冲运动的框架,即:
1:定义全局变量timer与speed.
2:创建运动函数,先关闭定时器,再开启,以免再次调用时出现多个定时器同时工作的问题。
3:解决speed的计算。缓冲运动的speed的结果都要取整。用三目运算:speed=a>b?c:d;
注意,当页面没有规定文档类型时用document.body.clientHeight或者document.body.scrollTop若规定了DTD,则获取滚动条卷掉高度用document.documentElement.scrollTop.一般在用到scrollTop时,为了打到兼容目的,可以定义一个scrollTop变量,并为其赋值:
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop.