触屏事件
- 触摸事件对象（TouchEvent）
- 移动端拖动元素
- touchstart、touchmove、touchend 可以实现拖动元素
- 但是拖动元素需要当前手指的坐标值 我们可以使用
targetTouches[0]里面的pageX和pageY - 移动端拖动的原理：盒子原来的位置 + 手指移动的距离
- 手指移动的距离：手指滑动中的位置 - 手指刚开始触摸的位置
拖动元素三步曲：
触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置
移动手指 touchmove： 计算手指的滑动距离，并且移动盒子
离开手指 touchend:
注意： 手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();
移动端常见特效
classList 属性
用于在元素中添加，移除及切换 CSS 类
添加类：
element.classList.add（’类名’）；
focus.classList.add(‘current’);
移除类：
element.classList.remove（’类名’）;
focus.classList.remove(‘current’);
切换类：
element.classList.toggle（’类名’）；
focus.classList.toggle(‘current’);
注意，所有类名都不带点
click 延时解决方案
fastclick 插件解决 300ms 延迟。 使用延时
GitHub官网地址： github.com/ftlabs/fast…
移动端常用开发插件
Swiper 插件的使用
中文官网地址： www.swiper.com.cn/
移动端常见插件
- superslide： www.superslide2.com/
- iscroll： github.com/cubiq/iscro…
插件使用方法
- 确认插件实现的功能
- 去官网查看使用说明
- 下载插件
- 打开demo实例文件，查看需要引入的相关文件，并且引入
- 复制demo实例文件中的结构html，样式css以及js代码
移动端常用开发框架
Bootstrap：www.bootcss.com/
