一、元素偏移量offset系列
offset就是偏移量,offset系列里面的相关属性可以动态的得到该元素的位置(偏移)、大小等。只能读取值,只有style才可以更改值
- 获取元素距离带有定位父元素的位置,如果元素没有父元素或者父元素没有定位,则以body为准
- 获得元素自身的大小(宽度或者高度)
- 注意:返回的数值都不带单位
- 常用属性
offset系列属性 | 说明 |
---|---|
element.offsetParent | 返回该元素带有定位的父级元素 |
element.offsetTop | 返回元素相对带有定位的父元素上方的偏移 |
element.offsetLeft | 返回元素相对带有定位的父元素左边框的偏移 |
element.offseWidth | 返回自身包括(padding、边框、内容区的宽度 |
element.offsetHeight | 返回自身包括(padding、边框、内容区的高度 |
二、元素可视区client系列
1.主要是获取元素可视区的相关信息(经常获取大小)
- 返回数值不带单位
- 相关属性和说明
属性 | 说明 |
---|---|
element.clientTop | 返回元素上边框的大小 |
element.clientLeft | 返回元素左边框的大小 |
element.clientWidth | 返回自身(包括padding、内容区的宽度,不含边框) |
element.clientHeight | 返回自身(包括padding、内容区的高度,不含边框) |
三、元素scroll系列
可以动态地得到该元素的实际大小
- 相关属性
属性 | 说明 |
---|---|
element.scrollTop | 返回元素上边框的大小 |
element.scrolLeft | 返回元素左边框的大小 |
element.scrolWidth | 返回自身(包括padding、内容区的宽度,不含边框) |
element.scrolHeight | 返回自身(包括padding、内容区的高度,不含边框) |
-
事件:onscroll事件
在 addEventListener监听里面写成scroll -
window.pageYoffset :页面被卷去的头部(IE9以上)
四、mouseenter事件和mouseover事件
区别:
- mouseenter鼠标事件:只经过自身的元素触发,不触发子盒子(不会冒泡)
对应事件是mouseleave(也不会冒泡事件) - mouseover鼠标事件:只经过自身的元素触发,会触发子盒子(会冒泡)
五、动画函数封装
- 原理:通过定时器setinterval()不断移动盒子的位置
- 封装:要传递两个参数:动画对象,移动到的位置`
// An highlighted block
obj就是目标对象,target就是好目标位置
function animate(obj,target){
}
调用函数:animate( obj,target )
- 动画函数给不同的对象添加不同的定时器(优化的一种)
给定时器这个obj对象添加属性即可,要是有多个定时器,就要清除以前的定时器,只保留当前的一个定时器来执行 - 动画函数添加回调函数,回调函数写在定时器的清除后边,一般都把封装的动画函数单独放在一个js文件里面
- 清除定时器:clearinterval(定时器名)
定时器名=null;清除定时器的变量