js封装一个动画函数

C博394

于 2022-02-26 22:30:23 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

分类专栏：周记文章标签：动画 javascript css3

本文链接：https://blog.csdn.net/weixin_63699342/article/details/123155113

周记专栏收录该内容

23 篇文章

订阅专栏

在寒假期间尝试写轮播图时，误以为可以直接使用预封装的动画函数，实际操作中发现需要自己动手封装。这篇博客记录了这个过程，分享了如何创建和使用自定义的动画函数，以及在编程学习中遇到问题时如何独立解决的经验。

寒假在家写轮播图的时候，因为当时是跳着看的，没有看老师自己封装动画函数，一直以为是可以直接拿来使用的，搞了半天才知道要自己封装，开学第一篇，拒绝emo

function animate(obj,target){ //obj是运动的对象
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var stop = (target - obj.offsetLeft)/10;
        stop = stop > 0 ? Math.ceil(stop) : Math.floor(stop);
        if(target == obj.offsetLeft){
            clearInterval(obj.timer);
        }
        obj.style.left = obj.offsetLeft + stop +'px';
    },10)
}