位置: 编程技术 - 正文

jQuery视差滚动效果网页实现方法经验总结(jquery滚动到底部加载数据)

编辑:rootadmin

推荐整理分享jQuery视差滚动效果网页实现方法经验总结(jquery滚动到底部加载数据),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery动画延迟方法,jquery滑动效果,jquery div滚动条,jquery滚动条插件,jquery div滚动条,jquery滑动效果,css视差滚动原理,jquery滚动条滚动事件,内容如对您有帮助,希望把文章链接给更多的朋友!

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

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

1、$(document).scrollTop() ;

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

2、$(window).scroll();

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

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

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

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

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

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

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

jQuery视差滚动效果网页实现方法经验总结(jquery滚动到底部加载数据)

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

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

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

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

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

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

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

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

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

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

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

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

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

CSS3 media queries结合jQuery实现响应式导航 目的:实现一个响应式导航,当屏幕宽度大于px时,效果如下:当屏幕宽度小于px时,导航变成一个小按钮,点击之后有一个菜单慢慢拉下来:思路

json定义及jquery操作json的方法 一、背景json是一种轻量级数据交换格式,非常利于Java服务与js的交互,本文将介绍json的简单定义和js如何解析json。二、内容1、json定义:简单的json格式

用jquery快速解决IE输入框不能输入的问题 在IE以上版本,微软为了提高IE输入框的便利性,增加了文本内容全部删除和密码眼睛功能,但是有些时候打开新的页面里,输入框却被锁定无法编辑

标签: jquery滚动到底部加载数据

本文链接地址:https://www.jiuchutong.com/biancheng/380730.html 转载请保留说明!

上一篇:基于jquery实现弹幕效果(jquery弹窗弹出一个页面)

下一篇:CSS3 media queries结合jQuery实现响应式导航

  • 计提企业所得税会计分录怎么做
  • 计提房产税要含税吗
  • 研发设备的折旧费计入研发费吗
  • 餐饮发票数量单价必须填吗
  • 办公家具发票要交税吗?
  • 机票抵扣进项只能在发生当月吗
  • 0税率发票有什么用
  • 事业单位注销税务登记
  • 个体户3万免税免的是哪些税
  • 小规模纳税人转让土地使用权
  • 计入当期损益的利得
  • 行政单位发过节费违法吗
  • 无实收资本能日本投资吗
  • 补记以前年度折旧
  • 发票勾选平台已经勾选统计确认,报税平台看不见
  • 2021虚开发票案例
  • 小规模纳税人如何转一般纳税人
  • 外管证开具后如何缴税?
  • 小规模纳税人进项税额怎么处理
  • 取得专用发票不交增值税
  • 上报汇总之后怎么申报
  • 邮局劳务费发票几个点
  • 文化事业建设费的征收范围
  • 发生的业务招待费属于什么科目
  • 航空公司票价怎么定的
  • 利息支出为什么不是经营成本
  • 如何开启windows10云服务
  • 企业购进房产会退税吗
  • 事业单位负债类科目包括哪些科目
  • 支付土地补偿款能以收据入账吗
  • win7怎么获取管理员
  • 如何删除文档中多余的页
  • php防止订单重复处理
  • 应收账款未计提坏账能直接核销
  • 招标场地费计入什么科目
  • node-gyp版本
  • 五金企业成本核算方法
  • 税务局要求小规模纳税人开专票
  • 租入固定资产改良支出属于资本性支出吗
  • 结转工资费用
  • 参展费会计分录
  • PHP中使用什么关键字声明变量的作用域为全局
  • 已抵扣认证的发票开红字发票需要将原票退回吗
  • [深度学习] 基于切片辅助超推理库SAHI优化小目标识别
  • 大学毕业后送快递
  • python中如何读取列表中的指定
  • 红字更正法和红字冲销的区别
  • 农民专业合作社连续几年未从事经营活动吊销营业执照
  • 工会经费与教育经费比例
  • 净资产包含哪些方面
  • PostgreSQL教程(十二):角色和权限管理介绍
  • 收到项目资本金入什么科目
  • 固定资产折旧加计扣除最新政策
  • 集团内部借款利率如何确定
  • 所得税怎么收取
  • 人力资源公司劳务外包
  • 工程设备租赁有哪些
  • 出售金融商品的增值税计税依据
  • 手机开个人发票怎么开
  • 广告赞助的形式
  • mysql的innodb和myisam
  • sqlserver数据库怎么导出
  • freebsd使用wifi
  • wbs是什么文件
  • centos重新安装命令
  • window8更新10
  • 苹果电脑支付在哪里设置
  • win8出现蓝屏怎么修复
  • win10 20h2官方下载
  • centos怎么安装
  • centos7.6忘记密码了怎么办
  • 怎么更改电脑键盘语言
  • I810 Graphics LINUX Driver的安装
  • jquery validator
  • nodejs 异步io底层原理
  • 读取带敏感字符的行的批处理
  • 跟我从零基础学到了什么
  • jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
  • 最简单的java设计
  • 经济适用房土地使用年限
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设