js学习笔记 —— 动画封装

本文介绍了如何使用JavaScript封装动画函数,包括设置定时器、计算移动方向、实时调整位置以及回调处理。同时,还展示了配合使用的样式查询函数,以简化前端开发者的工作流程。

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

动画函数封装

//配合下面函数使用
/* 
    * 样式查询
    * el:dom对象
    * styleStr:样式的名字
*/
function getStyle(el, attr) {
    if (window.getComputedStyle) {
        //其它浏览器
        return window.getComputedStyle(el)[attr]
    } else {
        //ie8及以下的
        return el.currentStyle[attr]
    }
}

/*
    * 动画函数
    * el 操作的对象
    * attr属性值
    * terhet目标位置
    * speed速度
    * callback回调函数
*/
function move(el,attr,target,speed,callback) {
    // 关闭计时器
    clearInterval(el.interId);
    // 调用函数查询当前位置并将结果转化成数字
    let currentVlaue = parseInt(getStyle(el,attr));
    /* 
        * 判断变化方向
        * spaeed如果大于currentVlaue则表示向左或上移动应为减
        * 反之则加
    */
    if(currentVlaue > target) {
        speed = - speed;
    }
    // 动画执行过程
    el.interId = setInterval(function () {
        // 获取元素当前位置
        let oldValue = parseInt(getStyle(el, attr)),
            // 计算移动后的新位置
            newValue = oldValue + speed;
        // 判断当前位置与目标位置的关系
        if (speed > 0 && newValue >= target || speed < 0 && newValue <= target) {
            newValue = target;
        }
        // 将位置改为新位置
        el.style[attr] = newValue + "px";
        // 判断是否到达目标位置
        if (newValue === target) {
            // 关闭计时器
            clearInterval(el.interId)
            // 判断是否有回调函数等同于下面注释掉的方式
            callback && callback()
            // if(callback){
            //   callback()
            // }
        }
    }, 30);
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值