offset家族

今日内容：
 学习offset 家族（理论）
 检测盒子宽高：offsetWidth和offsetHeight
 检测盒子距离左/上位置：offsetLeft和offsetTop
 检测盒子的带有定位的父盒子：offsetParent
 动画原理和封装（难点）
 案例：焦点图/切换图/无缝滚动

第1章 offset家族
1.1三大家族和一个事件对象
三大家族（offset/scroll/client）
事件对象/event （事件被触动时，鼠标和键盘的状态）（通过属性控制）
1.2Offset家族简介
offset这个单词本身是–偏移，补偿，位移的意思。
js中有一套方便的获取元素尺寸的办法就是offset家族；
offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent
共同组成了offset家族。
1.2.1offsetWidth和offsetHight （检测盒子自身宽高+padding+border）
这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。
offset宽/高 = 盒子自身的宽/高 + padding +border；
offsetWidth = width+padding+border；
offsetHeight = Height+padding+border；
1.2.2offsetLeft和offsetTop （检测距离父盒子有定位的左/上面的距离）
返回距离上级盒子（带有定位）左边s的位置
如果父级都没有定位则以body为准
offsetLeft 从父亲的padding 开始算,父亲的border 不算。
在父盒子有定位的情况下，offsetLeft == style.left(去掉px)
1.2.3offsetParent （检测父系盒子中带有定位的父盒子节点）
1、返回改对象的父级 （带有定位）
如果当前元素的父级元素没有进行CSS定位 （position为absolute或 relative，fixed）， offsetParent为body。
2、如果当前元素的父级元素中有CSS定位 （position为absolute或 relative，fixed）， offsetParent取最近的那个父级元素。
1.3offsetLeft和style.left区别

一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。
而 style.left不可以
二、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
三、offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）
四、如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。

style.left在=的左边和右边还不一样。（左边的时候是属性，右边的时候是值）
第2章 动画和封装
1.4动画定义
运动的图片。（让图片或者图画动起来）
1.5动画的种类
1.5.1闪现（基本不用）
1.5.2匀速（今天重点）
1.5.3缓动（以后重点）
1.6动画原理
盒子的位置 = 盒子本身所在的位置+步长。
1.7体验匀速动画
第3章 案例
1.7.1焦点图
难点1：先点亮盒子，然后移动图片。
2：移动图片的目标位置都是负值。
（负的图片的个数乘以图片的宽，到0之间）（负数）
3：获取盒子的索引值，我们才能知道，ul向右移动几张图片。

1.7.2切换图
难点：1.为什么移动的图片是负值。（参看上面的案例难点2）
2.为什么要计数器。
（我们需要一个值， 记录当前图片，方便后续操作）
3.为什么方法1里的num–；方法2里面的num++。
我们要看之前的图片，就要num–，要看后面的图片就要num++；
图片想左走显示后面的，图片向右走显示前面的。
1.7.3无缝滚动