360开机效果

作者: Yuann | 来源:发表于2021-10-09 14:28 被阅读0次

360开机效果
仿360开机
无知就是原罪
参360海参原力片好用吗
Docker安装实战
几个千万不要
Unity 实战【360VR 看房】
遮罩旋转进场
电脑黑屏怎么办
为你的EditText添加一个烟花效果

360开机动画.gif

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 322px;
            position: fixed;
            bottom:0;
            right:0;
        }
        span{
            position: absolute;
            top:0;
            right:0;
            width:30px;
            height: 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <span></span>
    <div class="hd" id="t">
        <img src="images/t.jpg" alt=""/>
    </div>
    <div class="bd" id="b">
        <img src="images/b.jpg" alt=""/>
    </div>
</div>
</body>
</html>
<script>
    var b = document.getElementById('b');
    var closeAd = document.getElementsByTagName("span")[0];
    closeAd.onclick = function() {
        animate(b,{height: 0},function(){
            animate(b.parentNode,{width:0});
        });
    }


    // 多个属性运动框架
    function animate(obj,json,fn) {  // 给谁    json
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            //开始遍历 json
            var flag = true;  // 用来判断是否停止定时器   一定写到遍历的外面
            for(var attr in json){   // attr  属性     json[attr]  值
                // 计算步长        用 target 位置 减去当前的位置  除以 10
                // console.log(attr);
                var current = parseInt(getStyle(obj,attr));  // 数值
                // console.log(current);
                // 目标位置就是  属性值
                var step = ( json[attr] - current) / 10;  // 步长  用目标位置 - 现在的位置 / 10
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                obj.style[attr] = current  + step + "px" ;
                console.log(current);
                if(current != json[attr])  // 只要其中一个不满足条件 就不应该停止定时器  这句一定遍历里面
                {
                    flag =  false;
                }
            }
            if(flag)  // 用于判断定时器的条件
            {
                clearInterval(obj.timer);
                //alert("ok了");
                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>