webApi
day05-DOM-网页特效篇
具备制作常见网页焦点图的能力
页面滚动事件和页面加载事件
-
页面滚动事件
-
滚动条在滚动的时候持续触发的事件
- 事件类型scroll
-
window.addEventListener('scroll', function () { // 执行的操作 })
-
box的内容在进行滚动的时候 box.addEventListener('scroll', function () { // 执行的操作 })
-
-
加载事件
-
加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
-
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
-
建议：后期业务处理之前，先添加load事件，保证所有资源全部加载完毕了
-
元素大小和位置
-
scroll家族
-
scroll事件
-
scrollWidth/scrollHeight:
- 获取元素的宽高值，包含 内容 + padding
-
scrollTop, scrollLeft
-
获取被卷去的大小
- 尽量在scroll事件里面获取被卷去的距离
-
可读写
-
scrollTop
- 获取垂直方向，被卷去头部距离
-
-
返回顶部案例:小火箭
- 通过scrollTop获取卷去的距离
- 通过scrollTop让页面回到顶部
-
-
offset家族
-
可视宽高
-
offsetWidth
- 包含width padding border
-
offsetHeight
-
注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
-
-
相对路径
- 相对于定位父容器的距离
- offsetLeft:当前元素相对于定位父容器的左侧距离
- offsetTop:当前元素相对于定位父容器的上侧距离
-
特征
- 获取出来的是数值,方便计算
- 只读属性,只能使用,不能设置
-
电梯导航
-
京东显示固定导航栏
-
-
client家族
-
给window注册的事件
-
window.resize
- window.onresize = function () {}
-
clientWidth
-
clientWidth
-
clientTop
-
clientLeft
-
综合案例
-
获取元素
-
实现单击标记切换图片
-
上一张
-
下一张
-
自动轮播
- 自动的本质是手动
