JS（20）元素偏移量 offset，滚动scroll，可视区client

1.offset概述

-- 使用offset系列相关属性可以动态的得到该元素的位置（偏移），大小等。

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素，如果父级没有定位，返回body
element.offsetTop	返回元素相对带有定位的父元素上方的偏移
element.offsetLeft	返回元素相对带有定位的父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度

2.offset与style区别

2.1.offset

1.可以得到任意样式表中的样式值
2.offset 系列获得的数值是没有单位的
3.offsetWidth 包含 padding + border + width
4.offsetWidth 等属性是只读属性，只能获取不能赋值，所以
我们想要获取元素大小位置，用 offset 更合适

2.2.style

1.style 只能得到行内样式表中的样式值
2.style.width 获得的是带有单位的字符串
3.style.width 获得不包含 padding 和 border 的值
4.style.width 是可读写属性，可以获取也可以赋值，所以
想给元素更改值，则需要用style改变
因为平时都给元素注册触摸事件，所以重点记住targetTouches

3.元素可视区client系列

-- 通过 client 系列的相关属性可以动态的得到该元素的边框大小，元素大小等。

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括 padding、内容区的宽度，不含边框、返回值无单位
element.clientHeight	返回自身包括 padding、内容区的高度，不含边框、返回值无单位

4.补充

4.1.立即执行函数

(function(){})() 或者（function(){}()）
主要作用：创建一个独立的作用域，避免了命名冲突问题。

4.2.load事件

下面这三种情况都会刷新页面，都会触发load事件
	1.a标签的超链接
	2.F5或者刷新按钮（强制刷新）
	3.前进或后退

4.3.pageshow事件

pageshow 事件在页面显示的时候触发，无论页面是否来自缓存，在重新加载页面中，pageshow 会在 load 事件触发后触发，
根据事件对象中的 persisted 来判断是否是缓存中的页面触发的 pageshow 事件。（这个事件给 window 添加）

5.元素滚动scroll系列

使用 scroll 系列相关属性可以动态的得到该元素的大小，滚动距离

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧的距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身是实际的宽度。不含边框
element.scrollHeight	返回自身实际的高度，不含边框

提示：
页面被卷去的头部：可以通过window.pageYoffset获得
页面被卷去的左侧：可以通过window.pageXoffset获得

6.三大系列总结

三大系列大小对比	作用
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回值不带单位
element.clientWidth	返回自身包括pading、内容区的宽度，返回值不带单位
element.scrollWidth	返回自身实际的宽度

主要用法：

1.offset 系列经常用于获得元素位置（offsetLeft、offsetTop）
2.client 经常用于获取元素大小（clientWidht、clientHeight）
3.scroll 经常用于获取滚动距离（scrollTop、scrollLeft）

7.mouseenter 和 mouseover 的区别

都是移动到元素上就会触发

1.mouseover 经过自身盒子会触发，经过子盒子还会触发
2.mouseenter 只会经过自身盒子触发（不会冒泡）
3.跟 mouseenter 搭配鼠标离开 mouseleave 同样不会冒泡

8.动画函数封装

8.1.缓动效果原理

核心算法：（目标值-现在的位置）/ 10 作为每次移动的距离步长
步长值需要用 math.ceil() 向上取整
步长值如果是正值，则步长值向上去整。
步长值如果是负值，则步长向下取整。