关于匀速运动,变速运动,位置移动...例如轮播,放大镜效果封装

该博客探讨了如何使用JavaScript实现平滑动画,通过`setInterval`和速度调整来控制元素移动,并在到达目标位置时调用回调函数。同时,介绍了`getComputedStyle`方法用于获取元素的实时样式信息,确保动画过程中的精准控制。
function move(obj, property, step, target, callback) {
    clearInterval(obj.t);
    //根据起点和终点直接的关系,判别速度的正负
    step = parseFloat(getStyle(obj, property)) > target ? -step : step;
    //将定时器编号保存在对象的自定义属性上
    obj.t = setInterval(function () {
        var speed = parseFloat(getComputedStyle(obj)[property]) + step;
        //临界值判断
        if ((step > 0 && speed >= target) || (step < 0 && speed <= target)) {  //终点
            clearInterval(obj.t);
            speed = target;
            if (callback)           //动画完成的回调函数
                callback()
        }
        obj.style[property] = speed + 'px'
    })
}


function getStyle(obj, property) {
    if ("getComputedStyle" in window) {
        return window.getComputedStyle(obj)[property];
    }
    return obj.currentStyle[property]
}

评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值