PC端网页特效
1、元素偏移量offset系列
● 使用offset系列相关属性可以动态地得到元素的位置(偏移)，大小等(返回值不带单位)
● element.offsetTop，返回元素的上边界相对于父元素(他的包含元素) 的上边界的偏移量(注意：这个父元素必须带有定位，否则得到的数据是相对于body的)
● 注意这个值不会因为页面滚动而变化
● element.offsetLeft，返回元素的左边界相对于父元素左边界的偏移量(父元素必须定位，这个父元素必须带有定位，否则得到的数据是相对于body的)
● element.offsetWidth，返回自身包括padding，边框和内容区的宽度
● element.offsetHeight，返回自身包括padding，边框和内容区的高度
● element.offsetParent，返回带有定位的父亲，若父元素无定位或者没有父元素，则返回body
● 注意：DOM操作节点的element.parentNode，这个返回的是最近一级的父元素，对父元素无定位的要求
区别element.offsetWidth与element.style.width
● element.offsetWidth
● 1.可以获得任意样式表中的样式
● 2.offset系列的返回值是不带单位的数值
● 3.offset系列的返回值是包括border+padding+width
● 4.offsetWidth是只读属性，只能获取不能赋值
● element.style.width
● 1.只能获得行内样式表的样式(修改样式时生成的也是行内样式)
● 2.style.width获得的是带单位的字符串
● 3.style.width返回值只包含width
● 4.style.width是可读可写的属性，可获取也可赋值
● 综上，想要获取元素的大小和位置用offset；想要修改样式用style
2、元素可视区域client系列
● 使用client系列的属性可以获得元素可视区的相关信息，可以动态的得到元素的边框大小，元素大小等
● element.clientTop获取元素的上边框大小
● element.clientLeft获取元素的左边框大小
● element.clientWidth返回包括padding和内容区的宽度width，不包括边框。返回数值不带单位
● element.cliientHeight返回包括padding和内容区的高度height，不包括边框。
4、立即执行函数
● 不需要调用，自己能够立马执行的函数
● 写法
● (function( ){ })( )
● (function( ){ }( ))
● 立即执行函数也可以传递参数，前面的括号里写形参，后面的括号里写实参
● 立即执行函数最大的作用就是独立创建了一个作用域
3、元素滚动scroll系列
● element.scrollWidth，返回自身的实际宽度，不包括边框
● element.scrollHeight，返回自身(内容)实际的高度，不含边框
● 注意与client系列的区别，client只有元素的宽度与高度，内容过多超出元素的部分不会计入
● element.scrollTop，返回元素被滚动条卷去的上侧距离(竖直滚动条内容滚动的距离)
● element.scollLeft，返回元素被滚动条卷去的左侧距离(水平滚动条内容滚动的距离)
● scroll滚动事件，滚动条滚动触发(一般的触发对象是页面，故用document.onscroll())
● 注意
● 页面被滚动条 滚动的距离要用window.pageYOffset和window.pageXOffset获取
●
● 元素内容被滚动条滚动的距离用element.scrollTop和element.scrollLeft
● 窗口滚动
● 滚动窗口到特定的位置：window.scroll(x,y) 注意：x和y不带单位
5、动画函数封装
● 动画原理
● 核心原理：通过setInterval( )不断移动盒子的位置
实现步骤
● 1、获取盒子当前位置
● 2、让盒子在当前位置加上一个移动距离
● 3、用定时器重复这个操作
● 4、加一个结束定时器的条件
● 5、元素要添加定位，通过element.style.left值来控制元素移动
动画函数封装
● 必须有两个参数：动画对象obj，移动的目标距离target
● 如果多个元素都使用这个动画效果，每次都要var声明timer定时器，定时器名字都一样，很容易引起歧义。此外开辟很多空间，会占用大量内存。而我们可以给不同的元素使用不同的定时器(自己专门用自己的定时器)
● 解决方法：js是一门动态语言，可以很方便的给当前对象添加属性
● 我们设置定时器时，不通过var声明，而是将其设置为当前对象的一个属性(将var timer = setInterval(function( ){ })改为当前对象obj的属性obj.timer = setInterval(function( ){ }))
● 1、避免了var 声明变量，不用在内存中开辟空间
● 2、通过设置对象属性的方式，使得每个调用动画函数的对象都能拥有自己的定时器，不与别的定时器重名不易混淆
● 每次点击按钮，就会启动一次定时器，动画的速度会越来越快，该如何解决？
● 在动画函数中，要在定时器前面加一行代码来清除当前定时器，即每次启动定时器时都会先清除已有的定时器，这样就不会有定时器叠加的问题了
缓动动画原理
● 缓动动画：元素运动速度有所变化，通常是慢慢减速至停止
● 思路：让元素每次的移动距离慢慢变小，速度就会变慢
● 算法：每次移动的距离(步长)step=(目标距离-现在的位置) / 10，此外还要做取整的操作，避免小数才能让元素在目标位置上停下来(在js中要尽量避免小数运算)
● 注意：因为元素移动每次位置都会变，所以步长公式要写在定时器里面
● step = target - element.offsetLeft;要根据步长的正负来判断是向下取整还是向上取整
● step = step > 0 ? Math.ceil(step) : Math.floor(step);
● 当前盒子位置等于目标位置则停止定时器
动画函数添加回调函数
● 回调函数原理：函数可以作为一个实参，传到另一个函数里面。当函数执行完之后再执行这个作为参数传入的这个函数，这个过程叫做回调
● 回调函数要写在定时器结束的位置
