封装回调函数

//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})
        })

    })
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值