Comment charger du contenu en fonction de la position de la barre de défilement jquery et d'une explication détaillée du code d'implémentation

Idée d'implémentation :

Présentez d'abord la structure HTML de manière statique, utilisez pseudo-class:hover pour simuler l'effet d'animation, puis utilisez jQuery pour contrôler le changement des noms de classe d'animation pour obtenir l'effet ! Il détermine principalement le sens de défilement et le moment du chargement de l'animation dans la direction correspondante (c'est-à-dire les conditions de jugement pour savoir quand charger l'animation ! Points clés !).

Implémentation du code :

HTML :

<p class="header">
 实现思路：先布局好静态布局，再使用hover模拟动画行为，再改为类名on等用js进行控制！
 </p>
 <p class="banner">
 <h1>前端开发</h1>
 <p>
 Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，
 网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以
 浏览为主。
 </p>
 </p>
 <p class="con">
 <p class="con_l"><img src="images/1.jpg" alt="" /></p>
 <p class="con_2"><img src="images/2.jpg" alt="" /></p>
 </p>
 <p class="news">news</p>
 <p class="footer">footer</p>

CSS :

*{margin:0px;padding:0px;}//粗暴地清除默认边距
body{
 font-family:"Arial Microsoft Yahei";
 font-size:16px;
 font-weight:bold;
}
.header{
 width:100%;height:500px;
 background-color: #10E668;
}
.banner{
 width:100%;height:600px;
 background:#F7CF3B;
 text-align: center;
 margin:30px auto;
 overflow: hidden;

}
.banner h1{
 font-size:30px;
 padding:50px 0;
 position:relative;
 top:400px;
 transition:all 0.3s 0.3s linear;
}
.banner p{
 font-size:18px;
 width:80%;
 margin:30px auto;
 line-height: 1.8em;
 text-align: left;
 text-indent:2em;
 position:relative;
 top:400px;
 transition:all 0.5s 0.5s linear;
}
//动画类
.banner.on h1,.banner.on p{
 top:0px;
}

.con{
 width:80%;height:720px;
 background:#508E5A;
 margin:20px auto;
 overflow: hidden;
}
.con img{
 width:400px;height:auto;
}
.con_l{
 float: left;
 position:relative;
 left:-400px;
 transition:all 0.3s 0.3s linear;
}
.con_2{
 float: right;
 position:relative;
 right:-400px;
 transition:all 0.3s 0.3s linear;
}
//动画类
.con.on .con_l{
 left:0;
}
.con.on .con_2{
 right:0;
}
.news{
 width:100%;height:600px;
 background:#CA3400;
}
.footer{
 width:100%;height:600px;
 background-color: #ccc;
}

jQuery :

$(function(){
 /*version 0.1.0 函数封装*/
 //向下滚动时
 function addClass(ele){
 var winH=$(window).height()*0.5;//可视窗口的高度的一半，更改0.5可以调整滚动到底部、中部、顶部时候开始加载
 var top=$(window).scrollTop();//可视窗口的滚动高度
 var ele_t=$(ele).offset().top;//内容区的top
 var ele_h=$(ele).height();//内容区的高

 //判断条件，看草稿图1！
 if(top<ele_t-winH){
 $(ele).removeClass(&#39;on&#39;);
 }else if((top>ele_t-winH)&&(top<ele_t+ele_h)){
 $(ele).addClass(&#39;on&#39;);
 }else{
 $(ele).removeClass(&#39;on&#39;);
 }
 }
 //向上滚动时，看草稿图2！
 function addClass2(ele){
 var winH=$(window).height()*0.5;//更改0.5可以调整滚动到底部、中部、顶部时候开始加载
 var top=$(window).scrollTop();//可视窗口的滚动高度
 var ele_t=$(ele).offset().top;//内容区的top
 var ele_h=$(ele).height();//内容区的高

 //判断条件
 if(top>ele_t+ele_h){
 $(ele).removeClass(&#39;on&#39;);
 }else if((top<ele_t+ele_h)&&(top>ele_t-winH*2)){
 $(ele).addClass(&#39;on&#39;);
 }else{
 $(ele).removeClass(&#39;on&#39;);
 }
 }
 //获取前一次的滚动高度（这里是第一次）
 var firstTop=$(window).scrollTop();

 $(window).scroll(function(){
 //每次滚动重新获取滚动高度
 var lastTop=$(this).scrollTop();
 //后一次滚动高度大于前一次滚动高，说明向下滚动，否则想上滚动！
 if(lastTop>firstTop){
 //加载对应的内容区域
 addClass(&#39;.banner&#39;);
 addClass(&#39;.con&#39;);
 }else{
 addClass2(&#39;.banner&#39;);
 addClass2(&#39;.con&#39;);
 }
 //每次都将后一次的滚动高度赋值给前一次的滚动高度
 firstTop=lastTop;
 });
});

Résumé :

Ce genre L'effet est utilisé pour simuler le chargement par défilement du contenu d'animation. La principale difficulté réside dans le jugement de la direction de défilement et des conditions de jugement lors du chargement de l'animation dans la direction de défilement correspondante. Je pense que la logique doit encore être améliorée !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!