tx4-回调函数和仿360开机图片消失效果

最新推荐文章于 2022-05-12 20:28:11 发布

原创最新推荐文章于 2022-05-12 20:28:11 发布 · 312 阅读

0 ·

CC 4.0 BY-SA版权

01前端基础教程html_css_js 专栏收录该内容

78 篇文章

订阅专栏

本文介绍了一个使用回调函数实现的动画效果案例。当动画执行完毕后，回调函数将执行特定任务，例如改变元素的高度和宽度。通过JavaScript实现的多属性运动框架确保了动画的平滑过渡。

1.6回调函数
等动画执行完毕再去执行的函数

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 322px;
            position: fixed;
            bottom: 0;
            right: 0;
        }
        span{
            width: 30px;
            height: 20px;
            position: absolute;
            top: 0;
            right: 0;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <span></span>
        <div id="t">
            <img src="images/t.jpg" alt=""/>
        </div>
        <div id="b">
            <img src="images/b.jpg" alt=""/>
        </div>
    </div>
</body>
</html>
<script>
    var box = document.getElementById("box");
    var closeAd = document.getElementsByTagName("span")[0];
    var b = document.getElementById("b");
    closeAd.onclick = function () {
        animate(b,{height:0},function(){
            animate(box,{width:0})
        })
    }
    //多属性运动框架
    function animate(obj,json,fn){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var flag = true; //用来判断是否停止定时器 一定要写在遍历外面
            for(var attr in json){
                var current =parseInt(getStyle(obj,attr)); //数值
                var step = (json[attr] - current) /10;
                step = step>0 ? Math.ceil(step) : Math.floor(step);
                obj.style[attr] = current + step + "px";
                if(current != json[attr]){ //只要目标与json中任意一个值不等 就不能停止定时器 这个一定写在定时器里面
                    flag = false;
                }
            }
            if(flag){
                clearInterval(obj.timer);
                if(fn){fn();}
            }
        },30);
    }
    function getStyle(obj,attr){ //获取属性值
        if(obj.currentStyle){ //ie
            return obj.currentStyle[attr];
        }else{
            return window.getComputedStyle(obj,null)[attr]; //w3c
        }
    }
</script>