js滑动滚动条，盒子的缓冲运动问题
0
悬赏园豆：10
[已关闭问题]
关闭于 2018-09-07 11:35
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>缓冲运动升级版</title> <style> *{ margin: 0; padding: 0; } body{ height: 10000px; } #div1{ width: 100px; height: 100px; background: red; position: absolute; //left: 1000px; right: 0; // bottom:0; } </style> <script> window.onscroll=function () { //window.onscroll:表示滚动条滚动的时候触发该事件。 var oDiv=document.getElementById('div1'); var Scroll=document.documentElement.scrollTop||document.body.scrollTop;//考虑到兼容性，这里的Scroll表示的是滚动栏滚动的距离。 var Scroll1=parseInt(Scroll+document.documentElement.clientHeight-oDiv.offsetHeight); starmove(Scroll1); } var timer=null; function starmove(itarget) { var oDiv=document.getElementById('div1'); clearInterval(timer); //alert('aa'); timer=setInterval(function () { //设置该盒子的速度是可变的。且该变化和距离第二个盒子的距离成正比。 var speed=(itarget-oDiv.offsetTop)/10; if(speed>0) { speed=Math.ceil(speed); } else { speed=Math.floor(speed); //测试，是否执行到了这一步 //alert(speed); } //Math.ceil(speed); //这里出现了错误，虽然对速度进行了取整，但是取整的值没有传递给变量speed。 if (oDiv.offsetTop!=itarget) { //Math.floor() oDiv.style.top = oDiv.offsetTop + speed + 'px'; document.title=oDiv.offsetTop+','+speed; } else { clearInterval(timer); } },30) } </script> </head> <body> <div id="div1"></div> <div id="div2"></div> <p>总结这次发生流血事件的原因是</p> <p>1.将缓冲函数写到了滚动事件中</p> <p>2.滚动事件中没有定义oDiv</p> <p>3.缓冲函数中的定时器的值，不能定义在函数中，至于为什么？没懂</p> <p>3.</p> </body> </html>
