目标

能够说出常见offset系列属性的作用
能够说出常见client系列属性的作用
能够说出常见scroll系列属性的作用
能够封装简单动画函数
能够写出网页轮播图案例

1. 元素偏移量offset系列

1.1 offset概述

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

获得元素距离带有定位的父元素的位置
获得元素自身的大小（宽度高度）
注意：返回的数值都不带单位

offset系列常用属性：

element.offsetParent:返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body
element.offsetTop:返回元素相对带有定位父元素上方的偏移
element.offsetLeft:返回元素相对带有定位父元素左边框的偏移
element.offsetWidth:返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight:返回自身包括padding、边框、内容区的高度，返回数值不带单位

1.2 offset 与 style 区别

offset

offset 可以得到任意样式表中的样式值
offset 系列获得的数值是没有单位的
offsetWidth 包含padding + border + width
offsetWidth 等属性是只读属性，只能获取不能赋值
所以，我们想要获取元素大小位置，用offset更合适

style

style 只能得到行内样式表中的样式值
style.width 获得的是带有单位的字符串
style.width 获得不包含padding和border的值
style.width是可读性属性，可以获取也可以赋值
所以，我们想要给元素更改值，则需要用style改变

2. 元素可视区 client 系列

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

element.clientTop: 返回元素上边框的大小
element.clientLeft: 返回元素左边框的大小
element.clientWidth: 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.clientHeight:返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

立即执行函数

立即执行函数：不需要调用，立马能执行

    function fn() {
      console.log(1);
    }
    fn();

写法也可以传递参数进来

    // (function() {})() 或者 (function(){}());a
    (function(a) {
      console.log(a);
    })(3); // 第二个小括号可以看作在调用函数
    (function(a,b) {
      console.log(a + b);
    }(2,3));

立即执行函数最大的作用就是独立创建了一个作用域

案例：淘宝flexible.js源码分析

下面三种情况都会触发load事件。

a标签的超链接
F5或者刷新按钮（强制刷新）
前进后退按钮但是火狐中，有个特点，有个“往返缓存”，这个缓存中不仅保存着页面数据，还保存了DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里。

所以此时后退按钮不能刷新页面。

此时可以使用pageshow事件来触发。这个事件在页面显示时触发，无论页面是否来自缓存。在重新加载页面中，pageshow会在load事件触发后触发；根据事件对象中的persisted来判断是否缓存中的页面触发的pegeshow事件，注意这个事件给window添加。

3. 元素滚动 scroll 系列

3.1 元素 scroll 系列属性

scroll翻译过来就是滚动的，我们使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等。

element.scrollTop: 返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft: 返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth: 返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight：返回自身实际的高度，不含边框，返回数值不带单位

3.2 页面被卷去的头部

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件。

3.3 页面被卷曲的头部兼容性解决方案

需要注意的是，页面被卷曲的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

声明了DTD，使用 document.documentElement.scrollTop
未声明DTD,使用 document.body.scrollTop
新方法window.pageYOffset 和 window.pageXOffset，IE9开始支持

使用的时候 getScroll().left

三大系列总结

大小对比

element.offsetWidth:返回自身包括paddingg、边框、内容区的宽度、返回数值不带单位
element.clientWidth:返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.scrollWidth:返回自身实际的宽度，不含边框，返回数值不带单位

他们主要用法：

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

4. 动画函数封装

4.1 动画实现原理

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

实现步骤：

获得盒子当前位置
让盒子在当前位置加上一个移动距离
利用定时器不断重复这个操作
加一个结束定时器的条件
注意此元素需要添加定位，才能使用element.style.left

4.2 动画函数简单封装

注意函数需要传递2个参数，动画对象和移动到的距离。

// 简单动画函数封装 obj目标对象 target 目标位置
    function animate(obj, target) {
      var timer = setInterval(function() {
      if(obj.offsetLeft >= target) {
        // 停止动画 本质是停止定时器
        clearInterval(timer);
      }
      obj.style.left = obj.offsetLeft + 1 + 'px';
    },30);
    }

    var div = document.querySelector('.box');
    // 调用函数
    animate(div, 300);
    
    var span = document.querySelector('span');
    animate(span, 200);

4.3 动画函数给不同元素记录不同定时器

如果多个元素都使用这个动画函数，每次都有要var声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。

核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性。

// var obj = {};
    // obj.name = 'andy';
    // 简单动画函数封装 obj目标对象 target 目标位置
    // 给不同的元素指定了不同的定时器
    function animate(obj, target) {
      // 当我们不断地点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
      // 解决方案就是 让我们元素只有一个定时器执行
      // 先清除以前的定时器，只保留当前的一个定时器执行
      clearInterval(obj.timer);
      obj.timer = setInterval(function() {
      if(obj.offsetLeft >= target) {
        // 停止动画 本质是停止定时器
        clearInterval(obj.timer);
      } else {
        obj.style.left = obj.offsetLeft + 1 + 'px';
      }
      
    },30);
    }

    var div = document.querySelector('.box');
    var span = document.querySelector('span');
    var btn = document.querySelector('button');

    // 调用函数
    animate(div, 300);
    
    btn.addEventListener('click', function() {
      animate(span, 200);
    })

4.4 缓动效果原理

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

思路：

让盒子每次移动距离慢慢变小，速度就会慢慢落下来。
核心算法：（目标值 - 现在的位置）/10 做为每次移动的距离步长
停止的条件是：让当前盒子位置等于目标位置就停止定时器
注意步长值需要取整

4.5 动画函数多个目标值之间移动

可以让动画函数从800移动到500。

当我们点击按钮的时候，判断步长是正值还是负值。

4.6 动画函数添加回调函数

回调函数原理： 函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行玩之后，再执行传进去的这个函数，这个过程就叫做回调。

 btn800.addEventListener('click', function() {
      animate(span, 800, function() {
        span.style.backgroundColor = 'pink';
      });
    });

回调函数应放在函数结束的位置。

 function animate(obj, target,callback) {
      // 先清除以前的定时器，只保留当前的一个定时器执行
      clearInterval(obj.timer);
      obj.timer = setInterval(function() {
      if(obj.offsetLeft == target) {
        // 停止动画 本质是停止定时器
        clearInterval(obj.timer);
        if( callback) {
          // 回调函数
          callback();
        }
      } else {
        // 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：（目标值 - 现在的位置）/10
       obj.step = (target - obj.offsetLeft) / 10;
       obj.step = obj.step > 0 ? Math.ceil((target - obj.offsetLeft) / 10) : Math.floor((target - obj.offsetLeft) / 10);
        obj.style.left = obj.offsetLeft + obj.step + 'px';
      }
    },15);
    }

4.7 动画函数封装到单独JS文件里面

因为以后经常使用这个动画函数，可以单独封装到一个JS文件里面，使用的时候引用这个JS文件即可。

5. 常见网页特效案例

5.1 节流阀

防止轮播图按钮连续点击造成播放过快

节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画内容执行完毕，再去执行下一个动画，让事件无法连续触发。

核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。

开始设置一个变量var flag = true;

if(flag){flag=false;do something} 关闭水龙头

利用回调函数动画执行完毕，flag = true 打开水龙头

滚动窗口至文档中的特定位置

window.scroll(x,y);

里面的x和y不加px，直接写参数

模拟点击函数

相当于点击了一下某元素

element.click();

PC 端网页特效

目标

目录