目录
一.PC端网页特效
1.元素偏移量offset系列
(1)概述
(2)常见属性:
(3)offset与style比较
2.元素可视区client系列
(1)概述
(2)常见属性
(3)clientWidth与offsetWidth
3.元素滚动scroll系列
(1)概述
(2)常见属性
(3)页面被卷去的头部
(4)三大系列总结
4.立即执行函数
5.flexible.js源码分析
6.mouseenter 和mouseover的区别
7.动画函数封装
(1)动画原理
(2)动画函数简单封装
(3)动画函数给不同元素记录不同定时器(函数优化)
(4)缓动效果原理
(5)动画函数多个目标值之间移动
(6)动画函数添加回调函数
(7)动画函数封装到单独JS文件里面
8.常见网页特效案例
(1)轮播图/焦点图
(2)返回顶部
(3)筋斗云
二.移动端网页特效
1.触屏事件
(1)概述
(2)常见触屏事件
(3)触摸事件对象TouchEvent
(4) 移动端拖动元素
2.移动端常见特效
(1)轮播图
(2)classList属性
(3)click 延时解决方案
3.移动端常用开发插件
(1)概念
(2)常用插件
(3)插件使用
4.移动端常用开发框架
(1)概念
(2)常用框架
(3)Bootstrap框架
三.本地存储
1.简介
2.window.sessionStorage
(1)特性
(2)使用
3.window.localStorage
(1)特性
(2)使用
一.PC端网页特效
1.元素偏移量offset系列
(1)概述
偏移量,offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等
获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度）注意： 返回的数值都不带单位
(2)常见属性:
注意:
无right和bottomparentNode 属性也可返回父元素, 但返回为最近一级(亲)父元素 无论有无定位
(3)offset与style比较
2.元素可视区client系列
(1)概述
客户端,client 翻译过来就是客户端，使用 client 系列的相关属性来获取元素可视区的相关信息。动态得到该元素的边框大小、元素大小
(2)常见属性
(3)clientWidth与offsetWidth
clientWidth/ clientHeight: 不包含自身边框,但有专门的属性获取offsetWidth / offsetHeight: 包含自身边框3.元素滚动scroll系列
(1)概述
滚动的,与滚动条有关,使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等
(2)常见属性
(3)页面被卷去的头部
如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条. 当滚动条向下滚动时,页面上面被隐藏掉的高度, 就称为页面被卷去的头部。overflow: auto;自动出现滚动条滚动条在滚动时会触发 onscroll 事件。div.addEventListener('scroll',function(){});兼容性问题:
被卷去的头部通常有如下几种写法：
声明了 DTD，使用 document.documentElement.scrollTop未声明 DTD，使用 document.body.scrollTop新方法 window.pageYOffset 和 window.pageXOffset，IE9 开始支持
解决:function getScroll() { return { left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0, top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 }; } 使用的时候 getScroll().left
(4)三大系列总结
主要用法:
offset系列 常用于获得元素位置 offsetLeft offsetTopclient常用于获取元素大小 clientWidth clientHeightscroll常用于获取滚动距离scrollTop,scrollLeft ,页面滚动的距离通过window.pageXOffset获得
4.立即执行函数
不需要调用,立马能够自己执行的函数写法: (function() {})() 或者 (function(){}())前边的括号可写形参,最后边的小括号可看做调用函数,其中也可写实参主要作用: 创建一个独立的作用域,里边的变量都是局部变量,避免了命名冲突问题5.flexible.js源码分析
(function flexible(window, document) { // 像素比var docEl = document.documentElement; // 获取的html 的根元素var dpr = window.devicePixelRatio || 1 ; // dpr 物理像素比 若没有此属性,则当1来看 PC和手机端大小不一样// adjust body font size 设置body字体大小function setBodyFontSize() {if (document.body) {// 如果页面中有body元素 就设置body的字体大小document.body.style.fontSize = (12 * dpr) + 'px'} else { // 如果页面中没有body这个元素，则等页面主要的DOM元素加载完毕再去设置body的字体大小document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 10 设置html元素的文字大小 flexible是将屏幕划分为若干等分,一个等分为1remfunction setRemUnit() {var rem = docEl.clientWidth / 10; //html宽度/10docEl.style.fontSize = rem + 'px';}setRemUnit()//pageshow 重新加载页面触发的事件/* 刷新页面都会触发 load 事件的方式: a标签的超链接, F5或者刷新按钮（强制刷新）,前进后退按钮 *//* 火狐“往返缓存”,这个缓存中保存着页面数据,DOM和JavaScript的状态；实际上是将整个页面都保存在了内存里,所以此时后退按钮不能刷新页面,可使用 pageshow事件来触发这个事件在页面显示时触发,无论页面是否来自缓存,在重新加载页面中,pageshow会在load事件触发后触发;根据事件对象中的persisted来判断是否是缓存中的页面触发的pageshow事件,注意这个事件给window添加 */// reset rem unit on page resize 当我们页面尺寸大小发生变化时，要重新设置rem 的大小window.addEventListener('resize', setRemUnit);window.addEventListener('pageshow', function(e) { // e.persisted 返回的是true 如果这个页面是从缓存取过来的页面，也需要从新计算一下rem 的大小if (e.persisted) {setRemUnit();}})// detect 0.5px supports 有些移动端的浏览器不支持0.5像素的写法,实现支持if (dpr >= 2) {var fakeBody = document.createElement('body')var testElement = document.createElement('div')testElement.style.border = '.5px solid transparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight === 1) {docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)}}(window, document))
6.mouseenter 和mouseover的区别
当鼠标移动到元素上时就会触发 mouseenter 事件,类似 mouseover
两者之间的差别:
mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发, 触发2次mouseenter 只会经过自身盒子触发,因为mouseenter不会冒泡, 触发1次跟mouseenter搭配,鼠标离开 mouseleave 同样不会冒泡
7.动画函数封装
(1)动画原理
核心原理:通过定时器 setInterval() 不断移动盒子位置
实现步骤:
获得盒子当前位置让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作加一个结束定时器的条件注意此元素需要添加定位，才能使用element.style.left
(2)动画函数简单封装
注意函数需要传递2个参数，动画对象和移动到的距离
(3)动画函数给不同元素记录不同定时器(函数优化)
原因1:
如果多个元素都使用这个动画函数，每次都要var 声明定时器(浪费内存空间,且定时器名字同容易引起歧义).解决方案: 可以给不同的元素使用不同的定时器（不同类元素自己专门用自己的定时器）核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性
原因2:
添加按钮点击触发事件, 如果不断点击,速度会越来越快解决方案: 元素只有一个定时器 先清除以前的定时器,只保留当前一个定时器执行
(4)缓动效果原理
让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
让盒子每次移动的距离慢慢变小，速度就会慢慢落下来核心算法： (目标值 - 现在的位置 ) / 10(可改) 作为每次移动的距离(步长)停止的条件是： 让当前盒子位置等于目标位置就停止定时器 注意步长值需要取整
(5)动画函数多个目标值之间移动
点击按钮时候,判断步长是正还是负值: 若是正值,则步长往大了取整,若是负值,则步长向小了取整
(6)动画函数添加回调函数
回调函数原理：函数可以作为一个参数, 将这个函数作为实参传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就叫做回调。
回调函数写的位置：定时器结束的位置
(7)动画函数封装到单独JS文件里面
经常使用这个动画函数,可以单独封装到一个JS文件里面，使用的时候引用这个JS文件即可
单独新建一个JS文件, HTML文件引入 JS 文件
// 匀速动画: 盒子当前位置 + 固定位置当前位置offsetLeft // 缓动动画: 盒子当前位置 + 步长step 停止条件: 当前盒子位置等于目标位置就停止定时器 // 函数优化: 给不同元素指定不同定时器目标对象obj,目标位置targetfunction animate(obj,target,callback){ //callback接收实参function(){}函数 ,函数调用写在清除定时器里//当不断点击按钮,此元素速度会越来越快, 解决方案: 元素只有一个定时器 先清除以前的定时器,只保留当前一个定时器执行clearInterval(obj.timer);obj.timer = setInterval(function(){// 步长值写在定时器的里面 将步长值改为整数,避免小数到不了目标位置var step = (target - obj.offsetLeft) / 10;//缓动动画:可实现多个目标值之间移动(步长改为整数的原因) 正数则向上取整Math.ceil(), 负数则向下取整Math.floor()step = step > 0 ? Math.ceil(step) : Math.floor(step);if(obj.offsetLeft == target){clearInterval(obj.timer);// 停止动画 清除定时器//回调函数的调用写在清除定时器里,如果有回调函数则执行,没有则不执行if(callback){ callback(); }}obj.style.left = obj.offsetLeft + step + 'px';},15);}// 获取对象 函数调用 (可更改定时器中间隔时间)var div = document.querySelector('.box1');var box = document.querySelector('.box2');var btn500 = document.querySelector('.btn500');var btn800 = document.querySelector('.btn800');animate(div,1000);btn500.addEventListener('click',function(){// 调用函数 可将函数function(){}作为实参传给callback形参animate(box,500,function(){alert('移动结束!');}); })btn800.addEventListener('click',function(){animate(box,800);})
8.常见网页特效案例
(1)轮播图/焦点图
实现功能:1. 鼠标经过轮播图模块,显示左右按钮,离开隐藏2. 每点击左右按钮,切换一张图片3. 图片播放同时,小圆点一起变化4. 点击小圆点,播放相应图片 (使用动画函数,元素必须有定位,ul移动而不是li ul移动距离=小圆点的索引号 * 图片的宽度 (向左走,为负 得到索引号:设置自定义属性,点击时获取))5. 鼠标不经过轮播图,则自动播放6. 鼠标经过时,轮播图停止自动播放实现步骤:1.获取元素2.鼠标经过轮播图模块,显示左右按钮(btn.style.display),轮播图自动播放停止(清除定时器,清除定时器变量);鼠标离开按钮隐藏,自动播放开启(开启定时器,手动调用点击事件btn_right.click();)3.动态生成小圆点 获取ul中li的个数ul.children.length,利用for循环放入ol中 (创建节点creatElement('li'); 插入节点ol.appendChild(li); 同时记录当前小圆点的索引号,自定义属性得到li.setAttribute('index',i); 把ol中第一个li的类名设置为current)4.小圆点绑定点击事件 排他思想(写在生成小圆点的循环中) 清除所有li的类名current,设置当前li的类名current5.点击小圆点,移动图片(写在点击事件中) ul移动距离=小圆点的索引号 * 图片的宽度 得到索引号getAttribute('index'),动画调用 当点击某个li, 将其索引号给num和circle (解决bug,避免点击圆点再点击右按钮,播放的图片不对)6.克隆第一张图片(li),放到ul最后面 克隆写在生成小圆点的后边7.每点击右按钮,切换一张图片 节流阀{}8.小圆点跟随右侧按钮一起变化9.左侧安钮10. 自动播放轮播图 定时器 类似点击右侧按钮,使用手动调用右侧按钮点击事件其他:1.动态生成小圆点: 小圆点个数与图片个数同, 先得到ul中li个数,利用for循环放入ol中 创建节点creatElement('li'),插入节点ol.appendChild(li)2.小圆点排他思想 生成时绑定点击事件3.图片无缝滚动: 克隆第一张图放在ul最后,当要滚动到时,让ul快速不做动画跳到最左侧left:0; 同时num=0,可以新开始滚动 cloneNode() true深克隆,复制子节点,false浅克隆4.小圆点跟随右侧按钮一起变化: 声明一个全局变量circle,每次点击自增1,左侧按钮也需要5.节流阀: 回调函数,添加变量flag,锁住和解锁函数 true 防止轮播图连续点击造成播放过快
(2)返回顶部
window.scroll(x,y); 滚动到某位置, 不写单位 顶部(0,0)实现缓慢滚动到某位置: 可添加动画函数,将left相关值改为页面垂直滚动距离window.pageYoffset相关即可(3)筋斗云
给所有li绑定事件,鼠标经过时当前li位置为目标值,鼠标离开时回到起始位置,鼠标点击时把当前位置作为目标值,把当前位置存储起来,作为筋斗云的起始位置
二.移动端网页特效
1.触屏事件
(1)概述
移动端浏览器兼容性较好,不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方. 比如触屏事件 touch()也称触摸事件),Android 和 IOS 都有touch 对象代表一个触摸点,触摸点可能是一根手指，也可能是一根触摸笔. 触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作(2)常见触屏事件
(3)触摸事件对象TouchEvent
描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件,这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等touchstart, touchmove, touchend三个事件都会各自有事件对象,常见对象列表：(4) 移动端拖动元素
touchstart、touchmove、touchend 添加事件可实现拖动元素
移动端拖动的原理：
移动后盒子位置(this.style.left/top) = 盒子原来位置(x/y) + 手指移动距离(moveX/Y) + 'px';手指移动距离(moveX/Y) = 手指移动后坐标(e.targetTouches[0].pageX/Y) - 手指初始坐标(startX/Y 自定义)
拖动元素三步曲：
触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置移动手指 touchmove： 计算手指的滑动距离，并且移动盒子离开手指 touchend: 注意： 手指移动也会触发滚动屏幕,故需阻止默认的屏幕滚动 e.preventDefault(); 加在最后即可
2.移动端常见特效
(1)轮播图
1.轮播图自动播放 定时器 ul.style.transition = 'all 0.5s';过渡效果2.过渡完成后再判断 监听过渡完成的事件transitionend3.小圆点跟随图片变化 去掉原来current,添加类名4.手指滑动轮播图 只有左右 触摸,滑动 离开
(2)classList属性
HTML5新增的一个属性，返回元素的类名, 但是ie10以上版本支持,移动端不影响, 该属性用于在元素中添加，移除及切换 CSS 类。
添加类 element.classList.add（’类名’）；移除类 element.classList.remove（’类名’）;切换类 element.classList.toggle（’类名’）； 注意以上方法里面，所有类名都不带点
(3)click 延时解决方案
移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面
解决方案：
禁用缩放. 浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟 <meta name="viewport" content="user-scalable=no">利用touch事件自己封装这个事件解决 300ms 延迟(原理: 手指触摸屏幕,记录当前触摸时间, 手指离开屏幕,用离开的时间减去触摸的时间, 如果时间小于150ms,并且没有滑动过屏幕, 那么我们就定义为点击), 若有多个事件需要,则需要多次调用,麻烦使用插件, fastclick 插件解决 300ms 延迟
//封装tap，解决click 300ms 延时function tap (obj, callback) {var isMove = false;var startTime = 0; // 记录触摸时候的时间变量obj.addEventListener('touchstart', function (e) {startTime = Date.now(); // 记录触摸时间});obj.addEventListener('touchmove', function (e) {isMove = true; // 看看是否有滑动，有滑动算拖拽，不算点击});obj.addEventListener('touchend', function (e) {if (!isMove && (Date.now() - startTime) < 150) { // 如果手指触摸和离开时间小于150ms 算点击callback && callback(); // 执行回调函数}isMove = false; // 取反 重置startTime = 0;});}//调用 tap(div, function(){ // 执行代码 });
3.移动端常用开发插件
(1)概念
JS 插件是 js 文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用。如轮播图和瀑布流插件。
特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小 e.g: animate.js 也算一个最简单的插件
(2)常用插件
①fastclick插件
解决300ms延迟,使用延时 GitHub官网地址： /ftlabs/fastclick引入 js 插件文件 <script src='./fastclick.js'></script>, 按照规定语法使用(相应网址上有代码,复制到写js的模块中)
②Swiper插件
轮播图 中文官网地址： /下载并引入插件相关文件(css,js文件),按照规定语法使用
<!-- 引入swipercss文件 --><link rel="stylesheet" href="css/swiper.min.css"><!-- 引入swiperjs文件 --><script src="./js/swiper-bundle.min.js"></script><!-- 引入自定义js文件 因为自己写的依赖于引入的,故引入时写在引入的swiper.js文件下--><script src="./js/index.js"></script><link rel="stylesheet" href="./css/index.css">
③superslide插件
焦点图,图片/无缝滚动,tab标签切换 /
④iscroll插件
/cubiq/iscroll
⑤zy.media.js移动端视频插件
H5提供了 video 标签,但浏览器的支持情况不同. 不同的视频格式文件, 可以通过source 解决. 但外观样式,还有暂停,播放,全屏等功能只能自己写代码解决, 可使用插件方式来制作(解决视频在不同浏览器上播放的效果不一的问题)
(3)插件使用
确认插件实现的功能去官网查看使用说明下载插件打开demo实例文件，查看需要引入的相关文件，并且引入复制demo实例文件中的结构html，样式css以及js代码4.移动端常用开发框架
(1)概念
框架，就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。框架与插件比较:
框架: 大而全, 提供一套较为完整的解决方案,插件: 小而专一(其功能单一)，某个功能的解决方案
(2)常用框架
前端常用的框架有Bootstrap、Vue、Angular、React 等. 既能开发PC端, 也能开发移动端前端常用的移动端插件有 swiper、superslide、iscroll等(3)Bootstrap框架
Bootstrap 是一个简洁、直观、强悍的前端开发框架，它让 web 开发更迅速、简单。 它能开发PC端，也能开发移动端
Bootstrap JS插件使用步骤：
引入相关js 文件复制HTML 结构修改对应样式修改相应JS 参数
三.本地存储
1.简介
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。
特性:
数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大，sessionStorage约5M、localStorage约20M只能存储字符串，可以将对象JSON.stringify() 编码后存储
