PC端网页特效

1、元素偏移量offset系列

定义：offset 意思是偏移量，我们使用offset系列相关属性可以动态得到该元素的位置（偏移量）、大小等。
注意：

1）获得元素距离带有定位父亲的位置 2
）获得元素自身的大小（宽度高度）
3）返回的数值没有带单位

获取鼠标在盒子坐标：

盒子水平居中：transform:translate(-50%, -50%)

放大镜效果主要核心思想：

例子：

2、元素可视区client系列

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

立即函数： 不用调用，立马能够自己执行的函数.
立即执行函数最大的作用就是：独立创建一个作用域，里面所有变量都是局部变量，不会有命名冲突情况。
立即函数的两种写法：可以传递参数

1）（function() {}) () 第二个小括号可以看作是调用函数
2）(function(){}())

3、元素滚动scroll系列

mouseenter 和 mouseover 的区别：

4、动画函数封装

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

动画函数：

//简单动画封装obj目标对象， target目标位置
    function animate(obj, target, callback) {

      //当我们不断点击按钮，这个元素的速度会越来越快，因为开启了太多定时器
      //解决方案：让我们元素只有一个定时器执行
      //做法：先清除以前的定时器，只保留当前的一个定时器执行
      clearInterval(obj.timer);
      obj.timer = setInterval(function () {

        //步长值写到定时器里面
        //把步长值改为整数，不要出现小数问题
        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();
          }
        }
        obj.style.left = obj.offsetLeft + step + 'px';
      }, 30)

    }

5、常见网页特效案例

移动最后一张图片时，为了不出现背景颜色，而是将其显示为第一张的方法：
使用方法cloneNode(true)深克隆的方法


节流阀：

作用：防止轮播图按钮连续点击造成播放过快。
节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。
核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。

1、设置一个变量 var flag = true ；
2、if(flag) {flag = false; do something}：关水龙头；
3、利用回调函数 动画执行完毕，flag = true ：打开水龙头

返回顶部：
滚动窗口至文档中的特定位置
window.scroll(x, y)
注意：x 和 y 不跟单位，直接写数字即可；

如果想像动画一样返回顶部的方法：
将动画封装函数 中所有有关左右的改成跟页面相关（window.pageYOffset）

窗口滑动：window.scroll(0, window.pageYOffset + step)