原生JS实现下滑到当前模块时，上浮显示

凉风听雪

于 2024-08-26 15:59:18 发布

阅读量163

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS炫酷使用前端开发文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/p_s_p/article/details/141566446

源码：

<div style="height: 1000px;"></div>
<!-- 图 -->
<div class="yingxiao-box">
    <div id="yingxiaoimg" class="yingxiao-img"><img
            src="https://alp.alicdn.com/1703175009746-2100-220.png"
            alt=""></div>
</div>
<style>
    .yingxiao-img {
        text-align: center;
        transform: translateY(100%);
        /* 初始位置在视口下方 */
        opacity: 0;
        transition: transform 1s ease, opacity 1s ease;
        /* 平滑过渡效果 */
    }

    .visible {
        transform: translateY(0);
        /* 滑到视口内 */
        opacity: 1;
    }


</style>
<script>
    // 节流函数  
    function throttle2(func, limit) {
        let lastFunc;
        let lastRan;
        return function () {
            const context = this;
            const args = arguments;
            if (!lastRan) {
                func.apply(context, args);
                lastRan = Dat