4、this指向、动画案例、封装、offset、client、scroll

一、this指向问题

• 1、在构造函数中this指向实例化对象

  

• 2、在自定义对象的函数（方法）中指向this指向当前的对象

• 3、在普通函数中this指向window

  

• 4、函数中this指向：在事件函数中this指向事件源

• 5、在定时器函数中this指向window

二、动画案例

1、透明度变化：

利用opacity与定时器，注意小数相减的问题

##2、图片跟着鼠标走 必须给图片添加定位 必须写e ，因为clientX是event里面的

3、函数的封装及调用

4、事件的两种方法

三、offset系列（不包含margin ）

• offsetWidth = width + 左右padding + 左右 border

• offsetHeight = height + 上下padding + 上下 border

  

如果父元素没有定位

• offsetLeft = 距离左侧浏览器的横坐标

• offsetTop = 距离上侧浏览器的纵坐标

如果父元素有定位

• offsetLeft = 距离左侧父元素的横坐标

• offsetLeft = 距离上侧父元素的纵坐标

  

四、client系列

• clientWidth = width+左右padding
• 
• clientHeight = height+上下padding
• clientLeft = border
• clientTop = border

五、scroll系列

• scrollWidth = width + 滚动条卷去的width

• scrollHeight = height + 滚动条卷去的height

注意：scrollLeft/scrollTop必须在滚动事件下才能获取，可以在任何情况下设置

• scrollLeft = 滚动条卷去的width

• scrollTop = 滚动条卷去的height