封装回调函数

最新推荐文章于 2022-08-02 18:03:42 发布

weixin_44387746

最新推荐文章于 2022-08-02 18:03:42 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/weixin_44387746/article/details/86497953

版权

//fn  回调函数
//封装变速函数

function animate(ele,json,fn) {
    clearInterval(ele.timeId)
    ele.timeId=setInterval(function () {
        var flag=true;//假设全部到达目标位置
        for(var attr in json){
            //获取元素的当前位置
            var current=parseInt(getStyle(ele,attr));
            var target=json[attr];
            //移动的步数
            var step=(target-current)/10;
            step=step > 0?Math.ceil(step):Math.floor(step);
            current+=step;
            ele.style[attr]=current+"px";
            if(current==target){
                flag=false;

            }
        }
        if(flag){
            clearInterval(ele.timeId)
            //所有属性达到目标后调用函数
            //如果用户传了fn ,则调用
            if(fn){
                fn();
            }
        }
        //测试
        console.log("目标位置"+target+",当前位置"+current+",每次移动的步数"+step);
    },20)
}

my$("btn").onclick=function () {
    animate(my$("dv"),{"width":400, "height":400 ,"left":500,"top":400},function(){

        animate(my$("dv"),{"width":30, "height":30 ,"left":300,"top":500},function () {

            animate(my$("dv"),{"width":100, "height":30 ,"left":300,"top":0})
        })

    })
}