妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 2700|回复: 0

[求助] 缓冲运动——上下滑动的侧边栏

[复制链接]
frk 发表于 2017-2-6 00:46:52 | 显示全部楼层 |阅读模式
请问为什么在对t取整之后,div还是会上下晃动呢




<!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>
#div{height:100px;width:100px;background:red;position:absolute;right:0px;}
</style>
<script type="text/javascript">

window.onscroll=function(){
       
var oDiv=document.getElementById('div');
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(target){
        var oDiv=document.getElementById('div');
        clearInterval(timer);
        timer=setInterval(function(){
                var ispeed=(target-oDiv.offsetTop)/8;
                ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
                if(oDiv.offsetTop==target){
                        clearInterval(timer);        alert(1);
                }else{
                        oDiv.style.top=oDiv.offsetTop+ispeed+'px';
                        document.title=oDiv.offsetLeft;
                }
        },30);
}
}

</script>
</head>

<body style='height:2000px;'>
<div id='div'></div>
</body>
</html>


5.上下滑动的侧边栏.html

1.25 KB, 下载次数: 121

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-5-22 07:03 , Processed in 0.142172 second(s), 27 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表