jQuery视差滚动效果网页实现方法经验总结


Posted in Javascript onSeptember 29, 2016

本文总结分析了jQuery视差滚动效果网页实现方法。分享给大家供大家参考,具体如下:

首先说两个核心函数,当然是基于jQuery的:

1、$(document).scrollTop() ;

该函数主要是返回页面当前顶部距离页面顶部的像素值,是一个非负整数。

2、$(window).scroll();

该事件是监控页面是否滚动,一旦滚动则触发其回调函数。

由此两个函数,我们得到下面的代码:

$(window).scroll(function() {
var top = $(document).scrollTop();
if (top == 100) alert(top);
});

以上代码的意思是:当页面滚动时,检查当前顶部距离页面起始之间的像素是否为100,是则弹出消息框。

当能判断滚动的距离后,就可以进行其他的操作了。剩下的就是各种css的定位了。

在制作页面的时候,我们要确定那些图片是需要进行视差滚动的。对于每个图片,我们都需要将CSS属性定义为

position: absolute;

此刻该div会漂移到页面的左上角,当然最好写上 left: 0px; top: 0px;还有该div的宽度和高度,有必要的话,需要写上overflow和background,所有的图片都应该是png格式的,这个大家懂的。

设置好属性后,就进行定位div的起始位置。也就是修改left和top,有必要的话可以修改right和bottom。

等以上工作完成后,就可以进行动画设置了。

用到的函数就是css了,我是这样设置的:

$('#text1').css('top', text1_top-parseInt(s_top)*0.15+'px');

以上代码放在scroll()函数内,只要监测到页面滚动就开始执行。其中 s_top 是当前的滚动距离,之前提到过。text1_top 是 $('#text1')的原始位置,且当页面加载后,就需要读取。一般用:

var text1_top = $('#text1').offset().top;

获取,不能放在scroll()函数内。

现在就开始叙述视差滚动原理了:

当页面加载完毕后,得到$('#text1')距离页面顶部的高度,并赋值给text1_top。

当页面滚动事件触发后,执行 $('#text1').css('top', text1_top-parseInt(s_top)*0.15+'px') 语句,意思是:随着页面往下的滚动,将text1的顶部距离减去当前移动距离的0.15倍。也就是说页面每往下移动100个像素,text1只往上移动15个像素,以此类推。这里的减号需要注意,如果是加号,那就是往下移动15个像素。换句话说,加号是同向,减号是反向。

当页面滚动到某个距离后才进行触发,我的写法是判断:

if (s_top > 200) {
$('#text1').css('top', text1_top-parseInt(s_top - 200)*0.15+'px');
}

当滚动距离到200像素时,运行后面的语句:这里有一个不同是s_top - 200,这里是基数从0开始算,如果没有减200,那么这个基数就不是0,而是200。那么#text1的视差滚动也不会正确的。

最后,我想说一下offset函数,他的主要目的是确定当前元素所在的left和top的数值。我们之前说过用 position: absolute; 来进行div的设置,如果div没有设置这个,但需要滚动的话,那么必须首先用offset函数确定某个元素的left和top后,用css函数首先赋值给需要定位的元素(一定要在设置position: absolute;之前),再设置该元素为 position: absolute; 这个也是需要在scroll()函数之外进行的。

编写视差滚动页面的时候,最大的体会就是要思路清晰,再次就是注意运行的顺序,有时候需要用到回调函数。

需要有个相对安静的环境去写代码,精神要放松,这样效率才会更高,需要休息的时候就要休息,写代码时要一气呵成。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
csdn 博客的css样式 v3
Feb 24 Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 Javascript
axios如何取消重复无用的请求详解
Dec 15 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
js仿小米官网图片轮播特效
Sep 29 #Javascript
基于jquery实现弹幕效果
Sep 29 #Javascript
js获取Get值的方法
Sep 29 #Javascript
js带闹铃功能的倒计时代码
Sep 29 #Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 #Javascript
运用js教你轻松制作html音乐播放器
Apr 17 #Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 #Javascript
You might like
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
php set_time_limit()函数的使用详解
2013/06/05 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
jQuery判断邮箱格式对错实例代码讲解
2017/04/12 jQuery
Angular2 自定义validators的实现方法
2017/07/05 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
一个简易的js图片轮播效果
2017/07/22 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python中import与from方法总结(推荐)
2019/03/21 Python
多个python文件调用logging模块报错误
2020/02/12 Python
施工协议书范本
2014/04/22 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
意向协议书
2015/01/27 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
《勇者辞职不干了》ED主题曲无字幕动画MV公开
2022/04/13 日漫