原生JS实现下滑到当前模块时上滑淡入淡出

凉风听雪

于 2024-08-19 17:22:47 发布

阅读量273

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： javascript 前端开发语言

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

<!-- 确保有足够的空间可以滚动 -->  
<div style="height: 1000px;"></div>

<div class="about-certification-img" id="renzhengimg">
    <img src="https://img-operation.csdnimg.cn/csdn/silkroad/img/1722243038734.jpg" alt="">
  </div>
</div>
  
<!-- 确保有足够的空间可以滚动 -->  
<div style="height: 1000px;"></div>

<style>
    .about-certification-img {  
    transform: translateY(100%); /* 初始位置在视口下方 */  
    opacity: 0;  
    transition: transform 1s ease, opacity 1s ease; /* 平滑过渡效果 */  
    /* 其他样式，如宽度、背景等 */  
    width: 100%; /* 示例宽度 */  
    background-color: white; /* 示例背景色 */  
    padding: 20px; /* 示例内边距 */  
    box-sizing: border-box; /* 包括内边距和边框在内的总宽度 */  
}  
  
.visible {  
    transform: translateY(0); /* 滑到视口内 */  
    opacity: 1;  
}
</style>

<script>  
    // 节流函数  
    function throttle(func, limit) {  
        let lastFunc;  
        let lastRan;  
        return function() {