一、PC端网页特效

一、元素偏移量offset系列

1. 概述

使用其相关属性可以动态的得到该元素的位置偏移、大小等（包含padding+border+width）

常用属性：

element.offsetParent返回作为该元素带有定位的父级元素 若父级元素都无定位则返回bodyelement.offsetTop返回元素相对带有定位父元素上方的偏移（距离）element.offsetLeft返回元素相对带有定位父元素左边框的偏移element.offsetWidth返回自身包括padding、边框、内容区的宽度（相加），返回的数值都不带单位element.offsetHeight返回自身包括padding、边框、内容区的宽度，返回的数值都不带单位

2. offset与style区别

！！！仿京东放大镜效果案例记得写一遍！！1

二、元素可视区client系列

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

element.clientTop返回元素上边框的大小element.clientLeft返回元素左边框的大小element.clientWidth返回自身包括padding+内容区的宽度+不含边框，返回数值不带单位element.clientHeight返回自身包括padding+内容区的宽度+不含边框，返回数值不带单位

立即执行函数：不需要调用立马能够自己执行的函数  (function() {})()  或者 (function(){}())

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

！！！淘宝 flexible.js 源码分析！！！

三、元素滚动scroll系列

element.scrollTop返回被卷上去的上侧距离，返回数值不带单位 超出去的element.scrollLeft返回被卷去的左侧距离，返回数值不带单位element.scrollWidth返回自身实际的宽度，不含边框，返回数值不带单位element.scrollHeight返回自身实际的高度，不含边框，返回数值不带单位

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

注意：页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

总结

！！！经典面试题！！！

mouseenter与mouseover的区别

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

mouseenter只有经过自身盒子才会触发

因为mouseenter不会冒泡，同样他当mouseleave鼠标离开也不会冒泡

四、动画函数封装

.html实例

1. 动画实现原理

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

2. 动画函数简单封装

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

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

如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。 核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。

4. 缓动效果原理

5. 动画函数多个目标值之间移动 

点击按钮时候，判断步长是正值还是负值

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

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

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

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

五、常见网页特效案例

.html实例

节流阀P328

二、移动端网页特效

一、触屏事件

1. 触屏事件touch

touchstart手指触摸到一个DOM元素时触发touchmove手指在一个DOM 元素上滑动时触发touchend手指从一个DOM元素上移开是触发

2. 触摸事件对象（TouchEvent）

TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等

touches正在触摸屏幕的所有手指的一个列表targetTouches正在触摸当前DOM元素上的手指的一个列表changedTouches手指状态发生改变的列表，从无到有，or从有到无变化

3. 移动端拖动元素

二、常见特效

1. classList属性

返回元素的类名。ie10以上版本支持。该属性用于在元素中添加，移除及切换 CSS 类。

切换类：有就删除 无就添加 

 注意以上方法里面，所有类名都不带点

2. click 延时解决方案

移动端click事件会有300ms演示，因为移动端屏幕双击会缩放页面

3. 使用插件。 fastclick 插件解决 300ms 延迟。 

三、常用开发插件

1. JS 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。 特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。

GitHub官网地址：https://github.com/ftlabs/fastclick

2. Swiper 插件的使用

中文官网地址： https://www.swiper.com.cn/ 

3. 其他移动端常见插件

superslide： http://www.superslide2.com/  

iscroll： https://github.com/cubiq/iscroll

总结

四、常用开发框架

1. 框架

一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。

2. Bootstrap

Bootstrap 是一个简洁、直观、强悍的前端开发框架，它让 web 开发更迅速、简单。

它能开发PC端，也能开发移动端 Bootstrap JS插件使用步骤：