JS基础-元素移动动画_js元素挤出偏移动画-优快云博客

本文介绍了一个使用JavaScript编写的动画函数，该函数通过控制元素的位置变化实现动画效果。文章详细解释了函数参数的意义，包括要执行动画的对象、样式、目标位置、速度及回调函数。同时，提供了获取元素当前样式的辅助函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将如下代码,保存为JS文件.

// 写一条动画的函数：
/*
参数:
    obj:要执行动画的对象
    attr:要执行动画的样式,比如:left top width height
    target:执行动画的目标位置
    speed:移动的速度(正数向右移动,负数向左移动)
    callback:回调函数,这个函数将会在动画执行完毕以后执行
*/
function move(obj, attr, target, speed, callback) {
    // 关闭上一个定时器
    clearInterval(obj.timer);

    // 获取元素目前位置
    var current = parseInt(getStyle(obj, attr));

    // 判断速度正负值
    // 如果从0向800移动,则speed为正
    // 如果从800向0移动,则speed为负
    if (current > target) {
        speed = -speed;
    };

    // 开启一个定时器，用来执行动画效果
    // 向执行动画的对象中添加一个timer属性,用来保存它自己的定时器的标识.
    obj.timer = setInterval(function () {
        var oldValue = parseInt(getStyle(obj, attr));
        // 在旧值的基础上添加
        var newValue = oldValue + speed;

        // 判断newValue是否大于800
        // 从800向0移动
        // 向左移动时，需要判断newValue是否小于target
        // 向右移动时，需要判断vewValue是否大于target
        if (speed < 0 && newValue < target || speed > 0 && newValue > target) {
            newValue = target;
        };
        // 将新值设置给box1
        // 因为是变量,所以这里不能使用style.attr格式写,必须使用[attr]
        obj.style[attr] = newValue + 'px';

        // 当元素移动到0px时,将其停止执行动画
        if (newValue == target) {
            // 达到目标,关闭定时器
            clearInterval(obj.timer);

            // 动画执行完毕,调用回调函数
            // callback()
            // 如果按照上面的写法,callback函数则为必须要传入的函数.
            // 使用下面这种方法，则callback作为可选项函数
            // &&与的关系,  ||或的关系
            callback && callback();
        };
    }, 50);
}

/*
    定义一个函数, 用来获取指定元素的当前样式
    参数:
    obj 要获取样式的元素
    name 要获取的样式名
*/
function getStyle(obj, name) {
    if (window.getComputedStyle) {
        // 正常游览器的方式，具有getComputedStyle()方法
        return getComputedStyle(obj, null)[name];
    } else {
        // IE8的方式,没有getComputedStyle()方法
        return obj.currentStyle[name];
    };
};