Day10-JavaScript

一.JS动画

    
    
    
    




    向右走
    向左走
    

        

    

    

二.匀速动画封装

    
    
    
    




    向左走
    向右走
    

        

    

    

    

//封装好的JS

function constantMove(ele, target) {

    // ele    目标元素
    // target 移动目标距离

    var speed = 10;
    clearInterval(timerId);
    timerId = setInterval(function () {
        // 先判断清除
        if (ele.offsetLeft == target) {
            clearInterval(timerId);

        } else if (ele.offsetLeft < target) {
            ele.style.left = ele.offsetLeft + speed + "px";

            // 0 > -600
        } else if (ele.offsetLeft > target) {
            ele.style.left = ele.offsetLeft - speed + "px";

        }
    }, 20)
}

// constantMove(box, 0)

function slowMove(ele, target) {

    clearInterval(timerId);

    timerId = setInterval(function () {
        if (ele.offsetLeft == target) {
            clearInterval(timerId);
        } else {
            var speed = (target - ele.offsetLeft) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            ele.style.left = ele.offsetLeft + speed + "px";
        }
    }, 20)
}

三.缓慢动画

    
    
    
    




    向右走
    向左走
    

        

    

    

四.缓慢动画的封装

    
    
    
    




    向右走
    向左走