PC端网页特效

三大系列总结

image.png

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

1. 元素偏移量 offset 系列

1.1 offset 概述

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

image.png

1.2 offset 与 style 区别

image.png

2.元素可视区 client 系列

通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

image.png

3.元素滚动 scroll 系列

scroll可以动态的得到该元素的大小、滚动距离等

image.png

image.png

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

需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：
1. 声明了 DTD，使用 document.documentElement.scrollTop
2. 未声明 DTD，使用 document.body.scrollTop
3. 新方法 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

4.mouseenter 和mouseover的区别

 当鼠标移动到元素上时就会触发 mouseenter 事件
 类似 mouseover，它们两者之间的差别是
 mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发
 之所以这样，就是因为mouseenter不会冒泡
 跟mouseenter搭配 鼠标离开 mouseleave 同样不会冒泡

5.缓动动画函数封装

function animate(obj, target, 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);
}