一、实现效果
实现效果为,页面出现以后,向上滚动,浏览器窗口底部新出现的商品全部淡出
二、思路
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>
最后实现效果