JavaScript - 7

一、PC端网页特效

一、元素偏移量offset系列

1. 概述

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

• 获取元素距离带有定位父元素的位置
• 获取元素自身大小（宽高度）
• 返回的数值都不带单位！！！

常用属性：

element.offsetParent	返回作为该元素带有定位的父级元素 若父级元素都无定位则返回body
element.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 事件。

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

• 声明了 DTD，使用 document.documentElement.scrollTop
• 未声明 DTD，使用  document.body.scrollTop
• 新方法 window.pageYOffset 和 window.pageXOffset，IE9 开始支持

总结

•  offset系列经常用语获得元素位置 offsetTOP、offsetLeft
• client经常用语获取元素大小 clientWidth、clientHeight
• scroll经常用语获取滚动距离 scrollTop、scrollLeft
• 注意页面滚动的距离通过window.pageXOffset获得

！！！经典面试题！！！

mouseenter与mouseover的区别

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

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

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

四、动画函数封装

.html实例

1. 动画实现原理

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

• 获得盒子当前位置 
• 让盒子在当前位置加上1个移动距离 
• 利用定时器不断重复这个操作 
• 加一个结束定时器的条件 
• 注意此元素需要添加定位，才能使用element.style.left

2. 动画函数简单封装

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

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

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

4. 缓动效果原理

• 核心算法： (目标值 - 现在的位置 )   /   10    做为每次移动的距离 步长
• 停止的条件是： 让当前盒子位置等于目标位置就停止定时器  
• 注意步长值需要取整  

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

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

• 如果是正值，则步长 往大了取整 Math.ceil
• 如果是负值，则步长 向小了取整Math.floor

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

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

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

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

五、常见网页特效案例

.html实例

节流阀P328

二、移动端网页特效

一、触屏事件

1. 触屏事件touch

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

2. 触摸事件对象（TouchEvent）

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

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

• e.targetTouches[0]可以得到正在触摸DOM元素的第一个手指的相关信息 例如手指的坐标

3. 移动端拖动元素

• 拖动元素需要当前手指的坐标值 我们可以使用  targetTouches[0] 里面的pageX 和 pageY
• 原理：计算出手指移动的距离，用盒子原来的位置+手指移动距离
• 手指移动距离：手指滑动中的位置 - 手指刚开始触摸的位置
• 触摸元素 touchstart：  获取手指初始坐标，同时获得盒子原来的位置
• 移动手指 touchmove：  计算手指的滑动距离，并且移动盒子
• 离开手指 touchend:
• 注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();

二、常见特效

1. classList属性

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

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

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

2. click 延时解决方案

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

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

三、常用开发插件

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

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

• 引入 js 插件文件。
• 按照规定语法使用。

2. Swiper 插件的使用

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

3. 其他移动端常见插件

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

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

总结

• 确认插件实现的功能
• 去官网查看使用说明
• 下载插件
• 打开demo实例文件，查看需要引入的相关文件，并且引入
• 复制demo实例文件中的结构html，样式css以及js代码

四、常用开发框架

1. 框架

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

• 前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能开发PC端，也能开发移动端
• 前端常用的移动端插件有 swiper、superslide、iscroll等。

2. Bootstrap

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

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

• 引入相关js 文件
• 复制HTML 结构
• 修改对应样式
• 修改相应JS 参数