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 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
基于jQuery实现瀑布流页面
Apr 11 jQuery
Vuex和前端缓存的整合策略详解
May 09 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 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和MySql中计算时间差的方法详解
2015/03/27 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
js中this的用法实例分析
2015/01/10 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
分析Python读取文件时的路径问题
2018/02/11 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
学习python可以干什么
2019/02/26 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
Python ORM编程基础示例
2020/02/02 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
使用OpenCV实现人脸图像卡通化的示例代码
2021/01/15 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
HTTP状态码详解
2021/03/18 杂记
CSS3绘制不规则图形的一些方法示例
2015/11/07 HTML / CSS
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
药学职务聘任书
2014/03/29 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
小学德育工作总结2015
2015/05/12 职场文书
中秋节随笔
2015/08/15 职场文书