请教一个层随滚动条滚动的问题？

请教一下前辈们，我写的这个随滚动条滚动的层的动画效果有点问题：
当滚动条滚动滚动距离比较短（或者快速滚动滚动条）的时候，滚动效果就不是那么平滑了，
请教前辈们该怎么修改，才能使滚动的动画效果比较平滑？谢谢！！<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{
margin:0px;
padding:0px;
}
#container{
width:600px;
height:800px;
background:#ccc;
margin:0px auto;
}
#mes{
width:200px;
height:100px;
background:#aaa;
position:absolute;
left:0;
top:0;
}
</style>
</head><body>
<div id="container"></div>
<div id="mes">test</div>
<script type="text/javascript">
var mes=document.getElementById("mes");
window.onscroll=function(){
if (mes.movement) {
clearInterval(mes.movement);
}
mes.movement=setInterval("changePos()",2);
}
cur_pos=mes.scrollTop;
function changePos(){
var center_pos=document.documentElement.scrollTop+(document.documentElement.clientHeight-mes.clientHeight)/2;
if(cur_pos<center_pos)
{
cur_pos=cur_pos+3;
mes.style.top=cur_pos+"px";
}
if(cur_pos>center_pos)
{
cur_pos=cur_pos-3;
mes.style.top=cur_pos+"px";
}
}
</script>
</body>
</html>

解决方案 »

  1.   

    这个挺好的呀，你说的平滑是一个渐进吗？你可以利用Math的sin函数，或者百分比去处理每次行走的距离
      

  2.   

    谢谢楼上的前辈，我是在ff下快速的用鼠标来回的滚动滚动条，感觉左边的div的运动不是很流畅，好象有些“弹跳”的感觉，恳请前辈指教，像这种类似的效果有什么好的写法吗？
      

  3.   

    #mes{
        width:200px;
        height:100px;
        background:#aaa;
        position:fixed;
        left:0;
        top:0;
    }
    这样你满意吗~
      

  4.   

    谢谢cj205和zhangshaolongjj两位前辈，我明白了！谢谢~~