仿360开机

最新推荐文章于 2020-01-16 17:09:20 发布

鲜虾烧麦啵

最新推荐文章于 2020-01-16 17:09:20 发布

阅读量146

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43939158/article/details/103719167

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

仿360开机

今天来写一下360的开机效果
先来开一下效果：
在这里插入图片描述

<!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;
        }
        .box img{
            vertical-align: top;
        }
    </style>   
</head>
<body>
<div class="box" id="box">
    <span></span>
    <div class="hd" id="hd">
        <img src="images/t.jpg" alt=""/>
    </div>
    <div class="bd" id="bt">
        <img src="images/b.jpg" alt=""/>
    </div>


</div>
</body>
</html>

javascript部分代码如下：


  <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
         var close =$('box').children[0];
         close.onclick=function(){
           animate($('bt'),{"height": 0},function(){
                 animate($('box'),{"width": 0});
            });
         }
         function getStyle(obj, attr){
            if(window.getComputedStyle){
                return window.getComputedStyle(obj, null)[attr];
            }else{
                return obj.currentStyle[attr];
            }
        }
//缓动框架(基本的缓动动画都可以用缓动框架来实现)
function animate(obj, json,callback){
     // 1.清除定时器
    clearInterval(obj.timer);
     // 2.设置定时器
    obj.timer = setInterval(function(){
        // 3.计算当前属性值
        var current=0;
        var step=0;
        // 4.关闭定时器标志位
        var flag=true;
         // 5.遍历json数组
        for (var attr in json) {

         current = parseInt(getStyle(obj, attr));
          // 6.计算步长
         step = (json[attr]- current) / 10;
         step = step > 0 ? Math.ceil(step) : Math.floor(step);
         // 7.代入动画公式
         obj.style[attr] = current + step + 'px';   
        if(current != json[attr]){
            flag = false;
            }
        }
        if(flag){
            clearInterval(obj.timer);
            if(callback && typeof callback == 'function'){
                        callback();
                    }
        }
    }, 20);
}
    </script>