Please enable JavaScript.
Coggle requires JavaScript to display documents.
移动端网页特效 - Coggle Diagram
移动端网页特效
插件
概念
一个JS文件，只需要在使用的时候引入插件，并且按照它的语法规范书写，就可以完成某些功能
fastclick
解决网页中点击后的300毫秒延时
swiper
提供网页中的滑动，滚动效果源代码
superslide
iscroll
视频插件：zy.media,js
classList属性
作用
返回元素的类名，有几个类名就返回几个，可以通过数组的索引号来获取
添加类
element.classList.add( ' 类名 ' )
是在后面追加类名，不会覆盖类，注意前面不需要加上' . '
移除类
element.classList.remove(' 类名 ')
切换类
element.classList.toggle(' 类名 ')
原来有这个类名，就可以把它删除，如果原来没有，就可以加上
触屏事件
概念
移动端浏览器兼容性较好，不需要考虑js的兼容性问题，Android Q和IOS都有这个事件
常见对象列表
touches：正在触摸屏幕的所有手指的一个列表
常用TargetTouches：正在触摸当前DOM元素上的手指的列表（数组）
changedTouches：手指状态发生了改变的列表，从有到无，从无到有
targetTouches【0】：可以得到正在触摸DOM元素的第一个手指的相关信息，比如坐标等
拖动元素三部曲
移动手指：touchmove计算手指的滑动距离，并且移动盒子
离开盒子touchend
触摸元素：touchstart，获取手指初始坐标，同时获取盒子原来的位置
注：手指移动也会触发滚动屏幕所以要阻止默认的屏幕滚动e.preventDefault()
本地存储
特性
设置，读取方便，甚至页面刷新不丢失数据
容量较大，sessionStorage约5M，localStorage约20M
数据存储在用户浏览器中
只能存储字符串，可以将对象JSON.stringify()编码后存储
window.sessionStorage
特性
在同一个窗口（页面）下数据可以共享
以键值对的形式存储使用
生命周期为关闭浏览器窗口
存储数据
sessionStorage . settItem(‘ key ’ , value )
获取数据
sessionStorage.getItem( ‘key ’)
删除数据
sessionStorage. removeItem(‘ key ’)
删除所有数据
sessionStorage.clear()
window.localStorage
特性
可以多窗口(页面)共享（同一浏览器）
以键值对的形式存储使用
生命周期永久生效，除非手动删除否则关闭页面也还会在
存储数据
localStorage.setItem（‘ key ’，value）
获取数据
localStorage.getItem( ' key ' )
删除数据
localStorage.remove(' key ')
删除所有数据
localStorage.clear()