jquery实现千图网页面加载数据的刷新效果（数据淡出，带源码）

本文链接：https://blog.csdn.net/yingshuangtu/article/details/119897161

一、实现效果

实现效果为，页面出现以后，向上滚动，浏览器窗口底部新出现的商品全部淡出
在这里插入图片描述

二、思路

1.首先获取所有的li标签
2.设置window的scroll事件，在滚动事件中，使用each将每个li标签循环，当li标签距离浏览器可视窗口顶部的距离为700,或者某个距离时，给li标签添加淡出的效果添加动画的方式为添加类名，li标签距离可视窗口顶部的距离为，li标签距离文档流的顶部高度减去鼠标滚动的高度
以下为整体代码

三、代码

需要引入jquery插件

<!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>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        li{
            list-style: none;
        }
        ul{
            margin:0 auto;
            width: 1400px;
            overflow: hidden;
            background-color: rgb(246, 179, 190);
        }
        li{
           
            float: left;
            width: 300px;
            height: 300px;
            margin: 20px;
            overflow: hidden;
            background-color: rgb(238, 53, 84);

        }
        li>img{
            opacity: 0;
            width: 100%;
            height: auto;
        }
        .move{
            margin-top: 0px;
            /* background-color: #fff; */
            transition: all 2s;
            opacity: 1;
        }
        .chuxian{
            opacity: 1;
            transition: all 2s;
        }
        
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            <li><img src="./img/1.jpg" alt=""> </li>
            
           
        </ul>
    </div>
    <script src="./jquery-3.6.0.js"></script>
    <script>
        // 1.获取li元素
        var li=$("li");
        // 2.当屏幕滚动时
        $(window).scroll(function(){
        //  3.scrollPos为屏幕滚动的长度，li对于文档流的顶部的距离-滚动的距离=li对于可视窗口顶部的距离
        // 即$(this).offset().top-scrollPos
        // 小于700时给li标签img标签设置淡出的样式
            var scrollPos=$(window).scrollTop();
            $.each(li,function(i,e){
                if($(this).offset().top-scrollPos<700){
                    // console.log(1);
                    $(this).addClass("move");
                    $(this).find("img").addClass("chuxian");
            }
               
            })
          

        })
        
    </script>
</body>
</html>