动态加载——区域（文字和图片）

最新推荐文章于 2022-02-24 19:37:45 发布

闹闹没有闹

最新推荐文章于 2022-02-24 19:37:45 发布

阅读量66

点赞数

分类专栏： JavaScript html 小demo

本文链接：https://blog.csdn.net/qq_41893686/article/details/115920711

版权

小demo 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

JavaScript

15 篇文章 0 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏



<!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>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        div {}

        img {
            display: block;
            margin-bottom: 300px;
            position: relative;
            left: 0;
            top: 0;
        }

        .hidden {
            transform: translate(0, 90%);
            opacity: 0;
        }

        .show {
            transform: translate(0, 0%);
            transition: transform .8s, opacity 1.5s;
            opacity: 1;
        }
    </style>
</head>

<body>

    <div>
        <img src="./img/homepage_arrow.png" alt="">
        <img class="hidden" src="./img/homepage_arrow.png" alt="">
        <img class="hidden" src="./img/homepage_arrow.png" alt="">
        <img class="hidden" src="./img/homepage_arrow.png" alt="">
        <img class="hidden" src="./img/homepage_arrow.png" alt="">
        <img class="hidden" src="./img/homepage_arrow.png" alt="">
    </div>

    <script>
        let children = $(".hidden")
        show()
        $(document).scroll(function () {

            show()
        })

        function show() {
            let scroH = $(window).scrollTop(); //滚动高度
            let viewH = $(window).height(); //可见高度
            for (let i = 0; i < children.length; i++) {
                var Etop = $(children[i]).offset().top;
                if (Etop - scroH - viewH < 0) {
                    $(children[i]).addClass('show')
                }
            }
        }
    </script>
</body>

</html>

闹闹没有闹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态加载——区域（文字和图片）

<!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>..
复制链接

扫一扫