PC端网页特效

从下面5个方面介绍PC端的网页特效：

元素偏移量offset系列
元素可视区client系列
元素滚动scroll系列
动画函数封装
常见网页特效案例

1. 元素偏移量offset系列

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

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

offset系列常用属性：

注意parentNode与offsetParent的区别：

offsetParent返回的是带有定位的父亲，否则返回的是body
parentNode返回的是最近一级的父元素，不管父元素有没有定位

// 1. 可以得到元素的偏移位置，返回的不带单位的数值
console.log(father.offsetTop);
console.log(father.offsetLeft);
// 它以带有定位的父元素为准，如果没有父元素或父元素没有定位，则以body为准
console.log(son.offsetLeft);
var w = document.querySelector('.w');
// 2. 可以得到元素的大小、宽度和高度，是包含padding+border+width的
console.log(w.offsetWidth);
console.log(w.offsetHeight);
// 3. 返回带有定位的父亲，否则返回的是body
console.log(son.offsetParent);  // 返回带有定位的父亲，否则返回的是body
console.log(son.parentNode);  // 注意与offsetParent的区别，返回的是最近一级的父元素，不管父元素有没有定位

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系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

注意：client宽度和offsetWidth最大的区别就是client不包含边框border。

3. 元素滚动scroll系列

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

页面被卷去的头部兼容性解决方案：

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

① 声明了DTD（文档类型定义(Document Type Definition)），使用document.documentElement.scrollTop

② 未声明DTD，使用document.body.scrollTop

③ 新方法window.pageYOffset和window.pageXOffset，IE9开始支持

function getScroll() {
    return {
        left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
        top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    }
}
// 使用的时候：getScroll().left;

三大系列总结：

它们主要用法：

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

4. 动画函数封装

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

实现步骤：

① 获得盒子当前位置

② 让盒子在当前位置加上1个移动距离

③ 利用定时器不断重复这个操作

④ 加一个结束定时器的条件

⑤ 注意此元素需要添加定位，才能使用element.style.left（千万注意：动画必须要加定位，否则动不起来！！！！！）

例如下面这段代码，给定两个小盒子：div和span，让这两个盒子运动到目标位置后就停下来。

// 简单动画函数封装：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('div');
var span = document.querySelector('span');
// 调用函数
animate(div, 300);
animate(span, 200);

上面的那段代码可以做一些性能优化的地方。

性能优化1：给不同的元素设置不同的定时器

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

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

var timer = setInterval(function() {...}
// 只需将上面那段代码改为下面这样
obj.timer = setInterval(function() {...}
// 将timer作为传入进来的对象的一个属性，这样就实现了不同的元素指定不同的定时器

性能优化2：解决创建多个定时器的问题。上面那段代码其实是有一个小问题的，如果在页面中添加一个按钮，点击按钮小盒子才开始动画，但是不断点击按钮的过程，小盒子的速度会越来越快，这就是因为创建了多个定时器，许多定时器叠加在一起，盒子自然会越走越快。那么如何解决这个问题呢？解决方案就是让元素只有一个定时器执行，也就是在开启定时器之前，先清除以前的定时器，只保留当前的一个定时器在执行。

function animate(obj, target) {
    // 只需要加上下面这句代码，清除以前的定时器
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {...})
}

上面的小例子中的动画都是匀速到达目标位置的，如果想要使元素速度有所变化呢？比如让速度慢慢停下来。这就需要用到缓动动画效果。

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

匀速动画就是当前元素的位置 + 固定的值

缓动动画就是当前元素的位置 + 变化的值（（目标值 - 现在的位置）/ 10）

思路：

① 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来

② 核心算法：（目标值 - 现在的位置）/ 10 作为每次移动的距离步长

③ 停止的条件是：让当前盒子位置等于目标位置就停止定时器

根据缓动动画原理，上面的例子中的代码就可以修改如下：

function animate(obj, target) {
    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        var step = (target - obj.offsetLeft) / 10;
        if (obj.offsetLeft >= target) {    
            // 停止动画
            clearInterval(timer);
        }
        // 把每次加1的步长值改为一个慢慢变小的值，步长公式: (目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 30);
}

但是使用了缓动效果后，出现了另外的一个小问题，就是元素到达不了目标位置，总是与目标位置相差一点点的距离。这又是为什么呢？这是因为步长的公式是做除法计算，避免不了会出现小数，因此到达不了目标值。那如何解决这个问题呢？步长值需要取整：① 正着走的过程step为正值，向上取整： 8.1 --> 9； ② 往回走的过程step为负值，向下取整：-8.1 --> -9

代码修改如下：

// 步长值写到定时器的里面
var step = (target - obj.offsetLeft) / 10;
// 只需添加下面这条代码
step = step > 0 ? Math.ceil(step) : Math.floor(step);

动画函数添加回调函数：

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

回调函数写的位置：定时器结束的位置。

function animate(obj, target, callback) {
    // 其余代码不变
    ...
    if (obj.offsetLeft == target) {
        // 停止动画
        clearInterval(obj.timer);
        // 回调函数写到定时器结束里面
        if (callback) {
            // 调用函数
            callback();
        }
    }
    // 其余代码不变
    ...
}
// 调用函数时可以传入回调函数，也可以不传

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

// animate.js封装文件
function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            // 注意此处的优化代码
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}