JavaScript - WebAPI - 动画 - 案例 - 360开机动画隐藏

最新推荐文章于 2022-05-30 20:36:52 发布

Henry_ww

最新推荐文章于 2022-05-30 20:36:52 发布

阅读量164

点赞数

分类专栏：案例

本文链接：https://blog.csdn.net/Henry_ID/article/details/119700109

版权

animation

案例专栏收录该内容

34 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>360开机动画隐藏</title>
        <style>
            .box {
                /*width: 322px;*/
                position: fixed;
                bottom: 0;
                right: 0;
                overflow: hidden;
            }

            span {
                position: absolute;
                top: 0;
                right: 0;
                width: 30px;
                height: 20px;
                /*background-color: red;*/
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <span></span>
            <div class="hd">
                <img src="images/t.jpg" alt="" />
            </div>
            <div class="bd">
                <img src="images/b.jpg" alt="" />
            </div>
        </div>
    </body>
    <script src="./js/animation.js"></script>
    <script>
        // 获取相关元素
        const box = document.querySelector(".box");
        // 给span做是事件
        box.firstElementChild.onclick = function () {
            animation(box.lastElementChild, 0, "height", function () {
                animation(box, 0, "width");
            });
        };
    </script>
</html>

Henry_ww

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript - WebAPI - 动画 - 案例 - 360开机动画隐藏

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt
复制链接

扫一扫