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 相关文章推荐
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
Dec 07 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
JS实现简易留言板特效
Dec 23 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
第六节 访问属性和方法 [6]
2006/10/09 PHP
PHP mkdir()定义和用法
2009/01/14 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
ECMAScript6新增值比较函数Object.is
2015/06/12 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
node.js调用Chrome浏览器打开链接地址的方法
2017/05/17 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
Python使用PyCrypto实现AES加密功能示例
2017/05/22 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
美国在线购买空气净化器、除湿器、加湿器网站:AllergyBuyersClub
2021/03/16 全球购物
校园网站的创业计划书范文
2013/12/30 职场文书
体育活动总结范文
2014/05/04 职场文书
保护环境倡议书范文
2014/05/13 职场文书
工会主席事迹材料
2014/06/03 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
团员年度个人总结
2015/02/26 职场文书
行为规范主题班会
2015/08/13 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书