PC端网页特效

元素偏移量offset系列

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

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

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

offset与style的区别

offset	style
offset可以得到任意样式表中的样式值	style只能得到行内样式表中的样式值
offset系列获得的数值是没有单位的	style.width获得的是带有单位的字符串
offsetWidth包含padding+ border+width	style.width获得不包含padding和border的值
offsetWidth等属性是只读属性，只能获取不能赋值	style.width是可读写属性，可以获取也可以赋值
所以，我们想要获取元素大小位置，用offset更合适	所以，我们想要给元素更改值，则需要用style改变

元素可视区client系列

client翻译过来就是客户端，我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。
client系列属性|作用
element.clientTop|返回元素上边框的大小
element.clientLeft|返回元素左边框的大小
element.clientWidth|返回自身包括padding 、内容区的宽度，不含边框,返回数值不带单位
element.clientHeight|返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

立即执行函数
写法：(function () {} () ) 或 (function () {} )()

    (function (a, b) {
        console.log(a + b);
    }(2, 3));
    (function (a, b) {
        console.log(a + b);
        var num = 10;//局部变量
    })(2, 3);//第二个小括号可以看做是调用函数

立即执行函数最大的作用就是独立创建了一个作用域，里面所有的变量都是局部变量不会有命名冲突的情况

元素滚动scroll系列

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

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight	返回自身实际的高度，不含边框，返回数值不带单位
window.pageYOffset	返回页面被卷去的上侧距离，返回数值不带单位
window.pageXOffset	返回页面被卷去的左侧距离，返回数值不带单位

动画函数封装

动画实现原理
核心原理:通过定时器setInterval()不断移动盒子位置。
实现步骤∶
1、获得盒子当前位置
2、让盒子在当前位置加上1个移动距离
3、利用定时器不断重复这个操作
4、加一个结束定时器的条件
5、注意此元素需要添加定位，才能使用element.style.left

缓动动画
核心算法：(目标值-现在的位置)/10作为每次移动的步长
步长：step = step > 0 ? Math.ceil(step) : Math.floor(step);
（加入Math.ceil与Math.floor避免小数，往绝对值更大的一边取）