jQuery实现根据滚动条位置加载相应内容功能


Posted in Javascript onJuly 18, 2016

实现jQuery根据滚动条位置加载相应的内容:向下滚动时当内容区域滚动到可视窗口高度的一半时,加载动画内容;向上滚动到相应的内容区域时也重新加载动画内容!

1.实现思路:

先静态布局好HTML结构,使用伪类:hover模拟动画效果,再使用jQuery 控制动画类名的切换来实现效果!主要判断滚动的方向,以及相应方向上加载动画的时机(即何时才加载动画的判断条件!关键点!)。

2.思维草稿图:

向下滚动加载动画判断条件:(代码中addClass()函数)

jQuery实现根据滚动条位置加载相应内容功能

向上滚动加载动画判断条件:(代码中addClass2()函数)

jQuery实现根据滚动条位置加载相应内容功能

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(){
 /*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('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.总结:

这种效果用于模拟滚动加载动画内容,重难点在于判断滚动的方向、相应滚动方向上加载动画时候的判断条件,感觉逻辑还是有待提升的!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 操作下拉列表框实现代码
Feb 22 Javascript
javascript中的一些注意事项 更新中
Dec 06 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
纯JS实现轮播图
Feb 22 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
JS HTML5拖拽上传图片预览
Jul 18 #Javascript
jQuery 操作input中radio的技巧
Jul 18 #Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 #Javascript
浅谈$('div a') 与$('div&gt;a')的区别
Jul 18 #Javascript
浅析JavaScript中的array数组类型系统
Jul 18 #Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 #Javascript
javascript时间差插件分享
Jul 18 #Javascript
You might like
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
9个PHP开发常用功能函数小结
2011/07/15 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
2013/08/30 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
2018/08/29 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
在Python中用get()方法获取字典键值的教程
2015/05/21 Python
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
python实现图片批量压缩程序
2018/07/23 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
Python中正则表达式的用法总结
2019/02/22 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
基于spring boot 日志(logback)报错的解决方式
2020/02/20 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
python全栈开发语法总结
2020/11/22 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
车间工艺员岗位职责
2013/12/09 职场文书
往来会计岗位职责
2013/12/19 职场文书
班委竞选演讲稿
2014/04/28 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python
Node与Python 双向通信的实现代码
2021/07/16 Javascript