|
用到的知识点， window.onscroll 事件的监听
scrollTop 值的获取，
屏幕的宽高
缓冲框架的使用
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; right:0;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onscroll=function ()
{
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+'px';
var t=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
startMove(parseInt(t));
}
var timer=null;
function startMove(iTarget)
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function (){
var iSpeed=(iTarget-oDiv.offsetTop)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
if(oDiv.offsetTop==iTarget)
{
clearInterval(timer);
}
else
{
oDiv.style.top=oDiv.offsetTop+iSpeed+'px';
}
txt1.value=oDiv.offsetTop+',目标：'+iTarget;
}, 30);
}
</script>
</head>
<body style="height:2000px;">
<input id="txt1" type="text" style="position:fixed; top:20px;" />
<div id="div1"></div>
</body>
</html>
| 
转播
