使用setTimeout實現(xiàn)動畫

    var oBox = document.getElementById('box');
    var maxLeft = utils.win('clientWidth') - oBox.offsetWidth;
    var step = 5;
    var timer = null;

    // 使用遞歸思想完成setTimout的輪詢動畫:
    // 每一次在執(zhí)行動畫之前，首先把上一次設(shè)置的那一個沒有用的定時器清除，以節(jié)約內(nèi)存
    function move() {
        window.clearTimeout(timer);
        var curLeft = utils.css(oBox, 'left');

        if (curLeft + step >= maxLeft) { // 邊界判斷: 加上步長計算
            utils.css(oBox, 'left', maxLeft);
            return;
        }

        curLeft += step;
        utils.css(oBox, 'left', curLeft);

        timer = window.setTimeout(move, 10);
    }

    move();
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容