动画的缓冲问题

在模仿人家的代码学习缓冲,但是对其中的一段不理解。
html和css代码是这样的:

<style>
    body,div,span{
        margin:0;
        padding:0;
    }
    #div1{
        width:200px;
        height:200px;
        background: red;
        position: relative;
        left:-200px;
        top:0;
    }
    #div1 span{
        width: 20px;
        height:50px;
        background-color: blue;
        position: absolute;
        left:200px;
        top:75px;
    }
</style>
<body>
<div id="div1">
    <span id="share">分享</span>
</div>
</body>

js代码是这样的:

    window.onload = function () {
        var odiv = document.getElementById('div1');
        odiv.onmouseover = function () {
            startMove(0);

        };
        odiv.onmouseout = function () {
            startMove(-200);
        }
    };
    var timer;
    function startMove(iTarget) {
//        由于每次onmouseover都会执行一次startMove,因此会导致每次像素的移动距离都是在叠加
//        所以在每次调用该函数时需要清楚上次计时器带来的效果
        clearInterval(timer);
        var odiv = document.getElementById('div1');

       timer = setInterval(function(){
            var speed = (iTarget - odiv.offsetLeft)/10;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            if(odiv.offsetLeft == iTarget){
                clearInterval(timer);
            }
            else {
                odiv.style.left = odiv.offsetLeft + speed + "px";
            }

        },30)
    }

我的问题主要在这一段

var speed = (iTarget - odiv.offsetLeft)/10;

因为iTagetodiv.offsetLeft的值都是固定的,假如差是200,除以10,结果也就是20px,每30毫秒重复一次,所以变化应该是恒定的呀,但事实确是开始快,结束慢。

还有这一段

 speed = speed>0?Math.ceil(speed):Math.floor(speed);

为什么要调用Math方法,明明是整数,怎么会变成浮点数。

就这两个地方有点不理解。
谢谢帮助。

阅读 2.5k
2 个回答

itarget的值固定,但是offsetleft每次都会取当前时间的值,随着时间推移,会越来越接近target值。也就导致了速度越来越慢

你的问题都归于同一个原因,offsetLeft会随着时间改变,所以会越来越快。

而又由于offsetLeft是变值,所以speed不总是10的倍数,所以除以10之后不为整数。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题