day05-DOM-网页特效篇

webApi

day05-DOM-网页特效篇

具备制作常见网页焦点图的能力

页面滚动事件和页面加载事件

页面滚动事件

滚动条在滚动的时候持续触发的事件

window.addEventListener(‘scroll’, function () { // 执行的操作 })

加载事件

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

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

元素大小和位置

scroll家族

scroll事件

scrollTop, scrollLeft

获取被卷去的大小

####### 尽量在scroll事件里面获取被卷去的距离

可读写

返回顶部案例

offset家族

可视宽高

offsetWidth

offsetHeight

注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0

特征

获取出来的是数值,方便计算

只读属性,只能使用,不能设置

电梯导航

放京东显示固定导航栏

client家族

给window注册的事件

window.resize

window.onresize = function () {}

clientWidth

clientWidth

clientTop

clientLeft

综合案例