黑马程序员-JS基础-移动端网页特效

目录

触屏事件

触摸事件对象

移动端常用开发插件和框架

superslide插件

iscroll插件

FastClick插件

swiper插件

bootstrap框架

MUI前段框架

本地存储

---

触屏事件

element.touchstart(){}	手指触摸到元素时触发
element.touchmove(){}	手指移动时触发
element.touchend(){}	手指离开时触发

触摸事件对象

e.touches	正在触摸的屏幕的手指的集合
e.tagetTouches（常用）	正在触摸当前元素的手指的集合
e.changedTouches	手指状态发生改变的列表，从无到有或从有到无；

移动端常用开发插件和框架

superslide插件

解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！

iscroll插件

iScroll采用了css3的transform动画模拟了惯性和弹性滚动的效果，效果和性能完美接近原生的滚动效果。同时提供了诸多功能包括自定义滚动条，指定滚动到元素等功能，还可以轻松实现下拉刷新，上拉加载。

FastClick插件

FastClick是专门未解决移动端浏览器300ms点击延迟和点击穿透问题所开发的一个轻量级的库。

*从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间， 因为它想看看你是不是要进行双击（double tap）操作。

也可以禁用缩放解决

<meta name='viewport' content='user-scalable=no'>

swiper插件

纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效。

bootstrap框架

Bootstrap 是目前最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB项目等，它简单灵活，使得 Web 开发更加快速、简单。

MUI前段框架

MUI是一款可以用来开发高性能手机APP的框架，目前也是最接近原生APP效果的H5框架，同时体积极小，并且开源。相比较于其它框架，它有极简、极快、极易的特征。

本地存储

window.sessionStorage 生命周期为关闭浏览器； 数据以键值对形式存储； 通过后台application查看；	sessionStorage.setItem(key,value)	存储数据
	sessionStorage.getItem(key)	获取数据
	sessionStorage.removeItem(key)	移除单条数据
	sessionStorage.clear()  不用带参数	移除所有数据
window.localStorage 生命周期为永久； 以键值对形式存储	localStorage.setItem(key,value)	存储数据
	localStorage.getItem(key)	获取数据
	localStorage.removeItem(key)	移除单条数据
	localStorage.clear()  不用带参数	移除所有数据