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 相关文章推荐
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
javascript实现当前页导航激活的方法
Feb 27 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
AngularJS实现路由实例
Feb 12 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 Javascript
微信小程序实现轮播图指示器
Jun 25 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中SESSION使用中的一点经验总结
2012/03/30 PHP
超小PHP小马小结(方便查找后门的朋友)
2012/05/05 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
js实现在文本框光标处添加字符的方法介绍
2012/11/24 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
2018/08/30 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
JS实现网站楼层导航效果代码实例
2020/06/16 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
Python实现一个简单的MySQL类
2015/01/07 Python
在centos7中分布式部署pyspider
2017/05/03 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
python找出因数与质因数的方法
2019/07/25 Python
详解python中*号的用法
2019/10/21 Python
python序列化与数据持久化实例详解
2019/12/20 Python
python global和nonlocal用法解析
2020/02/03 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
Canvas系列之滤镜效果
2019/02/12 HTML / CSS
匡威英国官网:Converse英国
2018/12/02 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
学生出入校管理制度
2014/01/16 职场文书
毕业大学生自荐信
2014/06/17 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
投诉书格式范本
2015/07/02 职场文书