PC端页面特效-知识点笔记

一、元素偏移量offset系列

offset就是偏移量，offset系列里面的相关属性可以动态的得到该元素的位置（偏移）、大小等。只能读取值，只有style才可以更改值

1. 获取元素距离带有定位父元素的位置，如果元素没有父元素或者父元素没有定位，则以body为准
2. 获得元素自身的大小（宽度或者高度）
3. 注意：返回的数值都不带单位
4. 常用属性

offset系列属性	说明
element.offsetParent	返回该元素带有定位的父级元素
element.offsetTop	返回元素相对带有定位的父元素上方的偏移
element.offsetLeft	返回元素相对带有定位的父元素左边框的偏移
element.offseWidth	返回自身包括（padding、边框、内容区的宽度
element.offsetHeight	返回自身包括（padding、边框、内容区的高度

二、元素可视区client系列

1.主要是获取元素可视区的相关信息（经常获取大小）

1. 返回数值不带单位
2. 相关属性和说明

属性	说明
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身（包括padding、内容区的宽度，不含边框）
element.clientHeight	返回自身（包括padding、内容区的高度，不含边框）

三、元素scroll系列

可以动态地得到该元素的实际大小

1. 相关属性

属性	说明
element.scrollTop	返回元素上边框的大小
element.scrolLeft	返回元素左边框的大小
element.scrolWidth	返回自身（包括padding、内容区的宽度，不含边框）
element.scrolHeight	返回自身（包括padding、内容区的高度，不含边框）

2. 事件：onscroll事件
   在 addEventListener监听里面写成scroll

3. window.pageYoffset :页面被卷去的头部（IE9以上）

四、mouseenter事件和mouseover事件

区别：

1. mouseenter鼠标事件：只经过自身的元素触发，不触发子盒子（不会冒泡）
   对应事件是mouseleave（也不会冒泡事件）
2. mouseover鼠标事件：只经过自身的元素触发，会触发子盒子（会冒泡）

五、动画函数封装

1. 原理：通过定时器setinterval()不断移动盒子的位置
2. 封装：要传递两个参数：动画对象，移动到的位置`

// An highlighted block
obj就是目标对象，target就是好目标位置
function animate(obj,target){
}
调用函数：animate( obj,target )

3. 动画函数给不同的对象添加不同的定时器（优化的一种）
   给定时器这个obj对象添加属性即可，要是有多个定时器，就要清除以前的定时器，只保留当前的一个定时器来执行
4. 动画函数添加回调函数，回调函数写在定时器的清除后边，一般都把封装的动画函数单独放在一个js文件里面
5. 清除定时器：clearinterval（定时器名）
   定时器名=null；清除定时器的变量