时间:2021-05-26
实现jQuery根据滚动条位置加载相应的内容:向下滚动时当内容区域滚动到可视窗口高度的一半时,加载动画内容;向上滚动到相应的内容区域时也重新加载动画内容!
1.实现思路:
先静态布局好HTML结构,使用伪类:hover模拟动画效果,再使用jQuery 控制动画类名的切换来实现效果!主要判断滚动的方向,以及相应方向上加载动画的时机(即何时才加载动画的判断条件!关键点!)。
2.思维草稿图:
向下滚动加载动画判断条件:(代码中addClass()函数)
向上滚动加载动画判断条件:(代码中addClass2()函数)
3.代码实现:
HTML:
<div class="header"> 实现思路:先布局好静态布局,再使用hover模拟动画行为,再改为类名on等用js进行控制! </div> <div class="banner"> <h1>前端开发</h1> <p> Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中, 网页制作是Web1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以 浏览为主。 </p> </div> <div class="con"> <div class="con_l"><img src="images/1.jpg" alt="" /></div> <div class="con_2"><img src="images/2.jpg" alt="" /></div> </div> <div class="news">news</div> <div class="footer">footer</div>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(){ //向下滚动时 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('on'); }else if((top>ele_t-winH)&&(top<ele_t+ele_h)){ $(ele).addClass('on'); }else{ $(ele).removeClass('on'); } } //向上滚动时,看草稿图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('on'); }else if((top<ele_t+ele_h)&&(top>ele_t-winH*2)){ $(ele).addClass('on'); }else{ $(ele).removeClass('on'); } } //获取前一次的滚动高度(这里是第一次) var firstTop=$(window).scrollTop(); $(window).scroll(function(){ //每次滚动重新获取滚动高度 var lastTop=$(this).scrollTop(); //后一次滚动高度大于前一次滚动高,说明向下滚动,否则想上滚动! if(lastTop>firstTop){ //加载对应的内容区域 addClass('.banner'); addClass('.con'); }else{ addClass2('.banner'); addClass2('.con'); } //每次都将后一次的滚动高度赋值给前一次的滚动高度 firstTop=lastTop; });});4.总结:
这种效果用于模拟滚动加载动画内容,重难点在于判断滚动的方向、相应滚动方向上加载动画时候的判断条件,感觉逻辑还是有待提升的!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了jQuery实现模仿微博下拉滚动条加载数据效果。分享给大家供大家参考,具体如下:滚动条距离底部$(function(){vari=4;$(wind
讲一下大概的原理吧,还是先上图:功能描述:根据不同菜单的属性值分别加载不同的数据下拉滚动条到一定位置预加载图片,滚动条拉到最底下的时候渲染html;鼠标移到菜单
jQuery实现滚动条滚动到子元素位置(方便定位)关键代码如下所示: jQuery:$("#nurse").scrollTop($("#nurse").scr
JQuery计算滚动条长度和位置,代码如下:javascript复制代码代码如下:varscrMinHeight=1;//滚动条最小高度varscrMaxHei
本文实例讲述了jquery实现Li滚动时滚动条自动添加样式的方法。分享给大家供大家参考。具体如下:这里使用jquery实现当拖动滚动条的时候,Li滚动列表中的内