点击显示隐藏的方法

首先那，

我们需要引入jquery-3.5.1.min.js   ，如果没有，请翻看我的下一篇博客

然后我们开始简单的布局

 <!-- 点击显示隐藏 -->
    <div id="dianji">
        <img src="./images/skyblue_back.png" alt="" onclick="back">
    </div>
    <!-- 显示在后面的文件或者图片 -->
    <div class="sanwei" style="height: 100vh;">
        <img src="./images/截图20220808134749.png" alt="">
    </div>
    <!-- 显示在上方的文件 -->
    <div id="page" style="display:block">
        <div class="tu">这是一段文字</div>
    </div>

基本的样式

<style>
    #dianji {
        position: absolute;
        top: 10px;
        left: 40px;
        width: 39px;
        height: 32px;
        z-index: 999;
    }

    #dianji .back_icon {
        width: 39px;
        height: 32px;
        cursor: pointer;
    }

    .sanwei img {
        width: 100%;
        height: 100%;
    }

    #page {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100vh;
        box-shadow: 0 -50px 600px 200px #000000 inset;    //这里是阴影
        background-image: url(/images/juxingsi.png) no-repeat;
        z-index: 1;      //这里是层级，记住，哪层是在上面的哪层的层级就高
        transition: opacity 2s;     //这里是动画
    }

    #page .tu {
        width: 200px;
        height: 60px;
        margin: 0 auto;
        font-size: 30px;
        color: #ffffff;
        line-height: 100px;
    }
</style>

在body下写入如下代码

<script type="text/javascript">
    function back() {
        console.log(111)
    }
</script>

这段代码一定要卸载body里面优先执行

    <script type="text/javascript">
        // 点击切换显示或隐藏div
        $('#dianji').click(function () {
            $('#page').toggle('normal', 'swing');
        });
    </script>

最后得到的效果就是这样的啦

点击左上方返回键外面这层阴影像左上方移动至消失

我这里下面是一张图片，如果是其他的东西也可以用，直接套公式就可

okk，到这里就完啦