仿360开机效果（并且封装一个带回调函数的缓动动画）

最新推荐文章于 2022-09-23 16:53:59 发布

空谷丶幽兰

最新推荐文章于 2022-09-23 16:53:59 发布

阅读量891

点赞数 4

分类专栏： JavaScript

本文链接：https://blog.csdn.net/yangaoyuan1999/article/details/103665890

版权

JavaScript 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

实现效果：

     1.点击关闭图片按钮先往下退出再往右退出

实现步骤：

     1.封装运动函数
     2.给图片上的关闭设置一个盒子
     3.给关闭盒子注册点击事件点击后
     4.下面图片高度为0，设置一个缓动动画
     5.上面图片宽度为0，设置一个缓动动画

缓动动画代码（带回调函数）：`

 function getStyle(obj,attr){ //兼容性写法获得样式
                if(window.getComputedStyle){ 
                    return window.getComputedStyle(obj, null)[attr];
                }else{
                    return obj.currentStyle[attr];
                }
            }
             function animate(obj, json, speed, callback){
                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]){
                        flag = false;
                    }
                }
                  if(flag){  
                    clearInterval(obj.timer);
                    if(callback && typeof callback == 'function'){ //验证callback是否传递，传递的话看是否是函数类型
                      callback();
                    }
                  }
                },speed);
            }

开机图片，的由两个图片中组成

<!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>
    <script type="text/javascript" src="函数封装.js"></script>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
        window.onload = function(){
            var span = document.getElementsByTagName('span')[0];
            var box = $('box');
            var bottom = $('bt');
            var top = $('hd');
            span.onclick = function(){
                var json = {"height": 0};
                animate(bottom,json,20,function(){
                animate(box,{"width":0},20);
                });
            }
        }
    </script>
</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>