js的三⼤家族（offsetscrollclient）和⼀个事件对象（event）
正则
⼀offset
u  offset 家族（理论）
u 检测盒⼦宽⾼：offsetWidth和offsetHeight
u 检测盒⼦距离左/上位置：offsetLeft和offsetTop
u 检测盒⼦的带有定位的⽗盒⼦：offsetParent
u 动画原理和封装
第1章
1.1 三⼤家族和⼀个事件对象
三⼤家族（offset/scroll/client）
事件对象/event  （事件被触动时，⿏标和键盘的状态）（通过属性控制）
1.2 Offset家族简介
offset这个单词本⾝是--偏移，补偿，位移的意思。
js中有⼀套⽅便的获取元素尺⼨的办法就是offset家族；
offsetWidth和offsetHight 以及offsetLeft和offsetTop以及offsetParent
共同组成了offset家族。js获取json的key和value
1.2.1 offsetWidth和offsetHight （检测盒⼦⾃⾝宽⾼+padding+border）
这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调⽤这两个属性，我们就能够获取元素节点的宽和⾼。
offset宽/⾼  =  盒⼦⾃⾝的宽/⾼ + padding +border；
offsetWidth = width+padding+border；
offsetHeight = Height+padding+border；
1.2.2 offsetLeft和offsetTop  （检测距离⽗盒⼦有定位的左/上⾯的距离）
返回距离上级盒⼦（带有定位）左边s的位置
如果⽗级都没有定位则以body为准
offsetLeft 从⽗亲的padding 开始算,⽗亲的border 不算。
在⽗盒⼦有定位的情况下，offsetLeft == style.left(去掉px)
1.2.3 offsetParent  （检测⽗系盒⼦中带有定位的⽗盒⼦节点）
1、返回改对象的⽗级（带有定位）
如果当前元素的⽗级元素没有进⾏CSS定位（position为absolute或 relative，fixed），offsetParent为body。
2、如果当前元素的⽗级元素中有CSS定位（position为absolute或 relative，fixed），offsetParent取最近的那个⽗级元素。
1.3 offsetLeft和style.left区别
⼀、最⼤区别在于offsetLeft可以返回没有定位盒⼦的距离左侧的位置。
⽽ style.left不可以
⼆、offsetTop 返回的是数字，⽽ p 返回的是字符串，除了数字外还带有单位：px。
三、offsetTop 只读，⽽ p 可读写。（只读是获取值，可写是赋值）
四、如果没有给 HTML 元素指定过 top 样式，则p 返回的是空字符串。
第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++；
图⽚想左⾛显⽰后⾯的，图⽚向右⾛显⽰前⾯的。
⼆ Scroll家族
u  缓动动画原理
u  封装缓动框架
u  案例：筋⽃云
u  scroll家族
u  封装scroll()⽅法
u  json使⽤格式
u  案例（固定导航栏、两侧⼴告栏、返回⼩⽕箭）
第1章缓动动画
1.1 三个函数
都是在数轴上向上或者向下取整。
Math.floor()      向下取整
1.2 缓动动画原理
动画原理 = 盒⼦位置 + 步长（步长越来越⼩）。
1.3 体验缓动动画
1.4 分析为什么没有到达指定位置
盒⼦本⾝位置⽬标位置步长已经到达了的位置
0 400 0 0
0 400 40 40
40 400 36 76
76 400 32.4 108.4
.........
JS实际运算时会四舍五⼊取整，然后计算。
396(四舍五⼊获取) 400 0.4        396.4
396(四舍五⼊获取) 400 0.4        396.4
.
...
1.5 offsetLeft和style.left的值的获取问题
获取盒⼦距离左侧具有定位的⽗盒⼦的距离（没有的body），四舍五⼊取整。
Style.left获取的是具体值。（赋值的时候也是直接赋值）
1.6 按例：筋⽃云
⿏标悬停和⿏标移开不会影响初始化值，只有点击影响。⽽移开的情况下，span移动到计数器的位置。第2章
1.7 Scroll家族组成
1.7.1 ScrollWidth和scrollHeight（不包括border）
检测盒⼦的宽⾼。（调⽤者：节点元素。属性。）
盒⼦内容的宽⾼。（如果有内容超出了，显⽰内容的⾼度）
IE567可以⽐盒⼦⼩。 IE8+⽕狐⾕歌不能⽐盒⼦⼩
1.7.2 scrollTop和scrollLeft
⽹页，被浏览器遮挡的头部和左边部分。
被卷去的头部和左边部分。
1.7.3 他有兼容性问题
⼀、未声明 DTD（⾕歌只认识他）
document.body.scrollTop
⼆、已经声明DTD（IE678只认识他）
document.documentElement.scrollTop
三、⽕狐/⾕歌/ie9+以上⽀持的
window.pageYOffset
1.7.4 兼容写法
= window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
= document.documentElement.scrollTop + document.body.scrollTop
1.8 获取title、body、head、html标签
document.title --- ⽂档标题；
document.head --- ⽂档的头标签
document.body --- ⽂档的body标签；
document.documentElement --- 这个很重要
它表⽰⽂档的html标签，也就是说，基本结构当中的html标签并不是通过document.html 去访问的，⽽
是document.documentElement 。
1.9 Json
Json是⼀种和数组类似的数据类型。
不同的是：数组中的元素是单⼀的。
⽽json中的元素，是以键值对的形式出现的。（key: value）
1.9.1 定义⽅法
var  json  =  { key1：value1,key2：value2,key3：  };
数组是通过索引值获取数组中的元素的，⽽json是通过key获取元素的。
1.9.2 获取内容
JSON(JavaScript Object Notation) 是⼀种轻量级的数据交换格式，我们称之为JavaScript对象表⽰法。使⽤JSON进⾏数据传输的优势之⼀。表⽰⽅法为键值对，key：value。
var myjson={k1:v1,k2:v2,}
获取⽅式：v1 == myjson.k1  v2 == myjson.k2
Json⼀般就是被当做⼀个配置单⽤；
1.9.3 Json的遍历（了解）
⽤的是新的语法⽅法：for ... In ....
1.10
1.10.1
documentpatMode === "BackCompat"
BackCompat  未声明
CSS1Compat  已经声明
注意⼤⼩写
1.11 案例
1.11.1
1.11.2
1.11.3    （原理类似：缓动框架。只不过是多⼀个页⾯跳转）
第3章
1.12 onscroll事件
只要页⾯滚动⽆论向左向右，向上向下，哪怕只有1px，都会触动这个事件
1.13 屏幕跳转
window.scrollTo
⽅法可把内容滚动到指定的坐标。
格式：
scrollTo(xpos,ypos)
xpos 必需。要在窗⼝⽂档显⽰区左上⾓显⽰的⽂档的 x 坐标。
ypos 必需。要在窗⼝⽂档显⽰区左上⾓显⽰的⽂档的 y 坐标
三:  第三⼤家族client
u  client家族
u  冒泡
u  案例：点击空⽩处隐藏模态框/事件委托
u  缓动框架
u  案例：360⼴告向下关闭/⼿风琴
第1章
1.1
1、clientWidth 获取⽹页可视区域宽度（两种⽤法）
clientHeight 获取⽹页可视区域⾼度（两种⽤法）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。