前端基本功dom13笔记

1、前端基本功javascript 第八天目录目录1今日内容：3第 1 章 offset. 31.1 三大和一个事件对象31.2 Offset简介31.2.1 offsetWidth 和 offsetHight （检测盒子自身宽高+padding+border）41.2.2 offsetLeft 和 offsetTop（检测距离父盒子有定位的左/上面的距离）41.2.3 offsetParent（检测父系盒子中带有定位的父盒子节点）41.3 offsetLeft 和 style.left 区别4第 2 章 动画51.4动画定义51.5动画的种类61.5.1闪现（基本不用）61.5.2匀速（今天重点

2、）61.5.3缓动（以后重点）61.6动画原理61.7体验匀速动画6第 3 章 案例61.7.1焦点图61.7.2切换图61.7.3无缝滚动7今日内容：学习 offset（理论）检测盒子宽高：offsetWidth 和 offsetHeight检测盒子距离左/上位置：offsetLeft 和 offsetTop检测盒子的带有定位的父盒子：offsetParent动画原理和封装（难点）案例：焦点图/切换图/无缝滚动第1章 offset1.1 三大和一个事件对象（offset/scroll/cnt）三大事件对象/event（事件被触动时，鼠标和键盘的状态）（通过属性控制）1.2 Offset简介o

3、ffset 这个单词本身是-偏移，补偿，位移的意思。js 中有一套方便的获取元素尺寸的办法就是 offset；offsetWidth 和 offsetHight 以及 offsetLeft 和 offsetTop 以及 offsetParent共同组成了 offset。1.2.1 offsetWidth 和 offsetHight （检测盒子自身宽高+padding+border）这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个属性，就能够获取元素节点的宽和高。offset 宽/高=盒子自身的宽/高 + padding +border；offsetWidth = width+

4、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 定位

5、（ition 为 absolute 或relative，fixed），offsetParent 为 body。2、如果当前元素的父级元素中有 CSS 定位（ition 为 absolute 或relative，fixed），offsetParent 取最近的那个父级元素。1.3 offsetLeft 和 style.left 区别一、最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。而 style.left 不可以二、offsetTop返回的是数字，而 style.top 返回的是字符串，除了数字外还带有：px。三、offsetTopstyle.top 可读写。（只读是

6、获取值，可写是赋值）只读，而四、如果没有给 HTML元素指定过 top 样式，则 style.top 返回的是空字符串。第2章 动画1.4 动画定义运动的。（让或者图画动起来）右边的时候是值）style.left 在=的左边和右边还不一样。（左边的时候是属性，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.为什么要计数器。（需要一个值