Web前端开发学习笔记11-- offset、client、scroll系列

1、元素偏移量 offset 系列

• offset 概述

offset 是元素偏移量，使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等

1. 获得元素距离带有定位度元素的位置
2. 获得元素自身的大小（宽度高度）
3. 返回的数值不带单位

• offset 系列常用属性

• offset 和 style 的区别

2、元素可视区 client 系列

• client 概述

client 翻译为客户端，使用 client 系列的相关属性来获取元素可视区的相关信息，通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等

• client 系列属性

3、元素滚动 scroll 系列

• scroll 概述

scroll 意为滚动的，使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等

• scroll 系列属性

4、offset、client、scroll 系列对比

• 主要用法

1. offset 系列经常用于获得元素位置：offsetLeft、offsetTop
2. client 系列经常用语获取元素大小：clientWidth、clientHeight
3. scroll 系列经常用于获取盾冬的距离：scrollTop、scrollLeft
4. 注意：页面滚动的距离通过 window.pageXOffset 获得

5、立即执行函数

• 含义

立即执行函数：不需要调用，立马能够自己执行的函数

• 作用：独立创建了一个作用域，里面的所有变量都是局部变量，不会有命名冲突

• 写法

1、(function() {})();  //第二个小括号可以看做调用函数，可以传递参数

2、(function() {}())

• 其他：mouseover 和 mouseenter 的区别

1、当鼠标移动到元素上时会触发 mouseenter 事件
2、mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发；mouseenter 只会经过自身盒子触发
3、mouseenter 不会冒泡（mouseleave 同理）

6、动画函数

• 动画实现原理

核心原理：通过定时器 setInterval() 不断移动盒子位置

实现步骤：
1、获得盒子当前位置
2、让盒子再当前位置上加一个移动距离
3、利用定时器不断重复这个操作
4、加一个结束定时器的条件
5、此元素需要添加定位才能使用element.style.left

• 动画函数简单封装

需要传递两个参数：动画对象和移动到的距离

// 封装 obj 目标对象到 target 目标位置
function animate(obj,target) {
  obj.timer = setInterval(function() {
    if(obj.offsetLeft >= target) {
      clearInterval(timer);
    }
    obj.style.left = obj.offsetLeft + 1 +'px';
  })
}

// 调用函数
animate(div,300);

节流阀：

1、var flag = true;
2、if(flag) {flag = false; ...};  //关闭
3、flag = true; // 打开