javascript我想做一个div跟着页面移动的效果 这样写为什么不对呢？
我想让这个div一直保持在页面的左上角让这个div跟着页面移动并且是缓冲运动我这样为什么不对？？<html><head><style>*{margin:0;padding...
我想让这个div 一直保持在页面的左上角 让这个div跟着页面移动 并且是缓冲运动 我这样为什么不对？？
<html>
<head>
<style>
*{margin:0;padding:0;}
body{height:1500px;}
#div1{width:50px;height:80px;background:blue;position:absolute;}
</style>
<script>
window.onscroll=function(){
var oDiv1=document.getElementById('div1')
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var t=0;
clearInterval(t);
t=setInterval(function(){
var speed=(scrollTop-0)/8;
speed=speed>0?Math.ceil(speed):math.floor(speed);
oDiv1.style.top=scrollTop+speed+'px';
},500);
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html> 展开
<html>
<head>
<style>
*{margin:0;padding:0;}
body{height:1500px;}
#div1{width:50px;height:80px;background:blue;position:absolute;}
</style>
<script>
window.onscroll=function(){
var oDiv1=document.getElementById('div1')
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var t=0;
clearInterval(t);
t=setInterval(function(){
var speed=(scrollTop-0)/8;
speed=speed>0?Math.ceil(speed):math.floor(speed);
oDiv1.style.top=scrollTop+speed+'px';
},500);
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html> 展开
展开全部
可以这么做试试看
把定时器写在外部了。
另外，注意要清除定时器。。
<html>
<head>
<style>
*{margin:0;padding:0;}
body{height:1500px;}
#div1{width:50px;height:80px;background:blue;position:absolute;top:0;}
</style>
<script>
var t1=0;
var dis = 0;
window.onscroll=function(){
var oDiv1=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
clearInterval(t1);
t1=setInterval(function(){
var top = parseInt(oDiv1.style.top);
dis = scrollTop - top;
if(Math.abs(dis/4)<=0.001){
clearInterval(t1)
}
oDiv1.style.top = top + dis/4 +'px';
},30);
};
</script>
</head>
<body>
<div id="div1" style="top:0;"></div>
</body>
</html>
追问
你这个代码可以运行 但是有两个问题有点不懂 这里为什么会用到parseInt呢？有什么用呢？还有dis是速度吧 判断if(Math.abs(dis/4)<=0.001)这里面为什么取绝对值呢 而且为什么让它小于等于0.001 ？为什么不是0呢？谢谢
追答
1、parseInt这个是每次都要获取当前div的top值跟停止滚动时的top值（也就是document.body.scrollTop）值计算需要滚动的距离。不然。如何缓动的起来？parseInt是因为取到的style.top是带有单位的，用其来转换为数字。当然你可以用其他方式获取到。也行的。
2、一个数除另一个数。。肯定是无限的变小而且不能为0。。<0.001这个只是随便取的。取的越小会越精确啊。
3、因为dis需要有个范围让计时器停下来，不可能让其无限的执行啊。往上滚动和往下滚动得到的dis肯定是一正一负对吧。所以要用abs。。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
window.onscroll = function () {
document.getElementById('div1').style.top = (document.documentElement.scrollTop || document.body.scrollTop) + 'px';
}window.onscroll本来就是滚动的时候执行了，根本不需要500毫秒执行一次
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
