首页 新闻 赞助 找找看

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>
这个名字不辣眼的主页 这个名字不辣眼 | 初学一级 | 园豆:12
提问于:2018-05-24 09:45
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册