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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
深入理解(function(){... })();
Aug 16 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
详解Vue 全局变量,局部变量
Apr 17 Javascript
js实现全选反选不选功能代码详解
Apr 24 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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实现的获取URL信息的类
2007/01/02 PHP
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
初学PHP的朋友 经常问的一些问题。不断更新
2011/08/11 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
深入探究PHP的多进程编程方法
2015/08/18 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
Jquery对select的增、删、改、查操作
2015/02/06 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
NodeJS中的MongoDB快速入门详细教程
2016/11/11 NodeJs
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
利用node.js实现自动生成前端项目组件的方法详解
2017/07/12 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中的yield浅析
2014/06/16 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
python 定时修改数据库的示例代码
2018/04/08 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
python中remove函数的踩坑记录
2021/01/04 Python
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
生日祝酒词大全
2015/08/10 职场文书
在Django中使用MQTT的方法
2021/05/10 Python
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫
Python创建SQL数据库流程逐步讲解
2022/09/23 Python