滚动事件

当页面进行滚动时触发的事件

事件名：scroll

监听整个页面滚动：

给 window 或 document 添加 scroll 事件，监听某个元素的内部滚动直接给某个元素加即可

加载事件

（1）加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

事件名：load

监听页面所有资源加载完毕：给 window 添加 load 事件

注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

（2）当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

事件名：DOMContentLoaded

监听页面DOM加载完毕：给 document 添加 DOMContentLoaded 事件

元素大小和位置

scroll家族

获取宽高： 获取元素的内容总宽高（不包含滚动条）返回值不带单位 scrollWidth和scrollHeight

获取位置: 获取元素内容往左、往上滚出去看不到的距离 ,scrollLeft和scrollTop ,这两个属性是可以修改的

offset家族

获取宽高：获取元素的自身宽高、包含元素自身设置的宽高、padding、border offsetWidth和offsetHeight

获取位置：获取元素距离自己定位父级元素的左、上距离

offsetLeft和offsetTop 注意是只读属性

client家族

获取宽高：获取元素的可见部分宽高（不包含边框，滚动条等） clientWidth和clientHeight

获取位置：获取左边框和上边框宽度

clientLeft和clientTop 注意是只读属性

会在窗口尺寸改变的时候触发事件： resize

DOM- 网页特效篇相关推荐

前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
JavaScript 之网页特效篇（offset系列、client系列、scroll系列、动画函数封装、常见网页特效）
网页特效 1.元素偏移量 offset 系列 offset 翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置可以获取 ...
JavaScript（八）—— PC 端网页特效
本篇为 JavaScript 系列笔记第八篇,将陆续更新后续内容.参考:黑马程序员JavaScript核心教程,前端基础教程系列笔记: JavaScript(一)-- 初识JavaScript / ...
《JavaScript网页特效经典300例》
<JavaScript网页特效经典300例> 基本信息作者: 杨磊张志美丛书名: 百炼成钢系列丛书出版社:电子工业出版社 ISBN:9787121220524 上架时间:20 ...
php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果，看了javascript网页特效实例大全 - phpStudy...
使用javascript实现雪花飘落的效果看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈 ...
JavaScript学习笔记（6）BOM（浏览器对象模型）pc网页特效（停止学习）
文章目录什么是BOM(浏览器对象模型) BOM中的window对象(顶级对象) window对象常见事件窗口加载事件 window.onload(等待文档内容全部加载完成才会触发,这样可以把js代 ...
javaScript PC端网页特效
PC端网页特效 1. 元素偏移量 offset 系列 1.1 offset 概述 1.2 offset 与 style 区别 2. 元素可视区 client 系列 2.1 立即执行函数 2.2 loa ...
JavaScript-PC端网页特效
(五)PC端网页特效 [!TIP] 在前面学习了JS基础.DOM 和 BOM 的基本操作后,这部分主要学习这些知识的拓展应用. 1. 元素偏移量 offset 系列 1.1 offset 概述 off ...
JavaScript之移动端网页特效与本地存储（57th）
一.移动端网页特效 1. 触摸事件 1.1 触屏事件概述 1.移动端浏览器兼容性较好,我们不需要考虑以前JS 的兼容性问题,可以放心的使用原生JS 书写效果,但是移动端也有自己独特的地方.比如触屏事件 ...
使用jQuery 快速高效制作网页特效
使用jQuery 快速高效制作网页特效第一章:JavaScript基础 DOM:document object model 文档对 ...

DOM- 网页特效篇