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)
Nov 19 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
Javascript中typeof 用法小结
May 12 Javascript
js实现日历的简单算法
Jan 24 Javascript
JS实现简单拖拽效果
Jun 21 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 Javascript
面包屑导航详解
Dec 07 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 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的开合式多级菜单程序
2006/10/09 PHP
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
php递归删除指定文件夹的方法小结
2015/04/20 PHP
php异常处理方法实例汇总
2015/06/24 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
jQuery 获取URL参数的插件
2010/03/04 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
理解javascript封装
2016/02/23 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
AngularJS入门之动画
2016/07/27 Javascript
详解js中==与===的区别
2017/01/08 Javascript
MUI实现上拉加载和下拉刷新效果
2017/06/30 Javascript
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
js实现一个简易计算器
2020/03/30 Javascript
对于Python的Django框架部署的一些建议
2015/04/09 Python
在centos7中分布式部署pyspider
2017/05/03 Python
python中实现k-means聚类算法详解
2017/11/11 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
创建索引时需要注意的事项
2013/05/13 面试题
公司活动邀请函
2014/01/24 职场文书
颐和园英文导游词
2015/01/30 职场文书
个人年终总结结尾
2015/03/06 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
vue+element ui实现锚点定位
2021/06/29 Vue.js