PC端网页特效

一、元素偏移量 offset 系列

1、offset 概述

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

获得元素距离带有定位父元素的位置

获得元素自身的大小（宽度高度）

注意： 返回的数值都不带单位

2、offset 与 style 区别

        拖动的模态框案例

        仿京东放大镜效果

二、元素可视区 client 系列

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

2、立即执行函数

不需要调用，立即能够自己执行的函数

主要作用：创建了一个独立的作用域。避免了命名冲突问题

        写法：（function（） { }（）    或者（function（）{ }（））；

淘宝flexible.JS源码分析之核心原理

三、元素滚动 scroll 系列

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

2、页面被卷去的头部

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发onscroll事件

        仿淘宝固定侧边栏案例

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

三大系列总结

主要用法：

1、offset 系列经常用于获得元素位置   offsetLeft  offsetTop

2、client 经常用于获取元素大小  clientWidth clientHeight

3、scroll经常用于获取滚动距离  scrollTop  scrollLeft

4、注意页面滚动的距离通过 window.pageXOffset  获得

mouseenter  和  mouseover 的区别

mouseenter 鼠标事件

当鼠标移动到元素上时就会触发 mouseenter 事件

类似 mouseover，它们两者之间的差别是

mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发

之所以这样，是因为mouseenter 不会冒泡

跟 mouseenter 搭配鼠标离开 mouseleave 同样不会冒泡

四、动画函数封装

1、动画实现原理

核心原理：通过定时器 setlnterval（）不断移动盒子位置

实现步骤：

1、获得盒子当前位置

2、让盒子在当前位置加上一个移动距离

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

4、加一个结束定时的条件

5、注意此元素需要添加定位，才能使用 element.style.left

2、动画函数简单封装

注意函数需要传递两个参数，动画对象和移动到的距离。

3、动画函数给不同元素记录不同定时器

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

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

4、缓动效果原理

缓动就是让元素运动速度有变化，最常见的是让速度慢慢停下来

思路：

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

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

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

4、注意步长值需要取整

var step = (target - obj.offsetLeft) / 10;

step = step >0 ? Math.ceil(step) : Math.floor(step);

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

缓动动画是 当前位置 + 变化的值（步长公式）

6、动画函数添加回调函数

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

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

7、动画函数封装到单独JS文件里面

1、单独建一个JS文件，使用时引用这个文件

五、常见网页特效案例

网页轮播图

鼠标经过显示隐藏左右按钮

动态生成小圆圈

       

  小圆圈排他思想        这句话放在for 循环里面

点击小圆圈滚动图片

此时用到animate 动画函数，将JS文件引入（注意：因为index.js 依赖animate.js 所以animate.js 要写到 index.js 上面）

注意是ul移动而不是小li

滚动图片的核心算法： 点击某个小圆圈，就让图片滚动 小圆圈的索引号乘以图片的宽度作为ul移动距离。

右侧按钮无缝滚动        在for循环外面

克隆第一张图片

放在ul 最后面

var first = ul.children[0].cloneNode(true);

ul.appendChild(first);

小圆圈跟随右侧按钮一起变化

当我们点击了某个小li 就要把这个小li 的索引号给num 

num = index 

把小li的索引号给 circle 

circle = index ；

左侧按钮功能制作

自动播放轮播图

clearInterval (timer)；

timer=null；//清除定时器变量

timer = setInterval（function（）{

        //手动调用点击事件

        arrow-r.click();

},2000）;

5、1 节流阀

防止轮播图按钮连续点击造成播放过快。

节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发

核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。

开始设置一个变量 var flag = true；

if （flag）{flag = false；do something} 关闭水龙头

利用回调函数 动画执行完毕，flag = true 打开水龙头

返回顶部案例

筋斗云案例