动态页面_csdn那些博客们的动态-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39314291/article/details/82155810

博客内容提及添加HTML、CSS和jQuery，这些均为前端开发常用技术。HTML用于构建网页结构，CSS负责页面样式，jQuery则能简化JavaScript操作，提升开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Add HTML

<div class="box1">
    <div class="text1">会动的</div>
</div>
<div class="box2">
    <div class="text2">静止的</div>
</div>
<div class="box3">
    <div class="text3">会动的</div>
</div>

Add CSS

        body {
            margin: 0;
        }

        .box1 {
            height: 500px;
            background-color: darkgray;
        }

        .text1 {
            width: 80px;
            background-color: #099;
            opacity: 0;
        }

        .box2 {
            height: 500px;
            background-color: lightblue;
        }

        .text2 {
            width: 80px;
            background-color: #099;
        }

        .box3 {
            height: 500px;
            background-color: purple;
        }

        .text3 {
            width: 80px;
            background-color: #099;
            opacity: 0;
        }

        .animate {
            opacity: 1;
            animation: upward 2s;
        }

        @keyframes upward {
            0% {
                transform: translateY(45px);
            }
            100% {
                transform: translateY(0);
            }
        }

Add jQuery

    /*
    element 标签 cssname CSS动画 offset 相对于窗口的距离
    */
    function scrollnumber(element, cssname, offset) {
        var a, b, c, d;
        d = $(element).offset().top; // 元素相对于窗口的距离
        a = eval(d + offset); // 目标坐标+窗口距离
        b = $(window).scrollTop(); // 监控窗口已滚动的距离;
        c = $(window).height(); // 浏览器窗口的高度
        if (b + c > a) {
            $((element)).addClass((cssname));
        }
    }

    function scrollfun() {
        scrollnumber(".text1", 'animate', 100);
        scrollnumber(".text3", 'animate', 100);
    }

    scrollfun();

    $(window).scroll(function () {
        scrollfun();
    });