1. 触屏事件

1.1 触屏事件概述

移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心地使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。

touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。

常见地触屏事件如下：

触屏touch事件	说明
touchstart	手指触摸到一个 DOM 元素时触发
touchmove	手指在一个 DOM 元素上滑动时触发
touchend	手指从一个 DOM 元素上移开时触发

<script>
        // 1. 获取元素
        // 2. 手指触摸DOM元素事件
        var div = document.querySelector('div');
        div.addEventListener('touchstart', function() {
            console.log('我摸了你');

        });
        // 3. 手指在DOM元素身上移动事件
        div.addEventListener('touchmove', function() {
            console.log('我继续摸');

        });
        // 4. 手指离开DOM元素事件
        div.addEventListener('touchend', function() {
            console.log('轻轻的我走了');

        });
    </script>

1.2 `TouchEvent` 触摸事件对象

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

touchstart、touchmove、touchend 三个事件都会各自有事件对象。

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

如果侦听的时一个DOM元素，那么touches和targetTouches两个的效果是一样的。

1.3 移动端拖动元素

【DOM BOM】笔记 7 日移动端网页特效1. 触屏事件2. 移动端常见特效4. 移动端常用开发框架5. 本地存储

注意：手指移动也会触发滚动屏幕，所以这里要阻止默认的屏幕滚动

e.preventDefault();

<div></div>
    <script>
        // （1） 触摸元素 touchstart：  获取手指初始坐标，同时获得盒子原来的位置
        // （2） 移动手指 touchmove：  计算手指的滑动距离，并且移动盒子
        // （3） 离开手指 touchend:
        var div = document.querySelector('div');
        var startX = 0; //获取手指初始坐标
        var startY = 0;
        var x = 0; //获得盒子原来的位置
        var y = 0;
        div.addEventListener('touchstart', function(e) {
            //  获取手指初始坐标
            startX = e.targetTouches[0].pageX;
            startY = e.targetTouches[0].pageY;
            x = this.offsetLeft;
            y = this.offsetTop;
        });

        div.addEventListener('touchmove', function(e) {
            //  计算手指的移动距离： 手指移动之后的坐标减去手指初始的坐标
            var moveX = e.targetTouches[0].pageX - startX;
            var moveY = e.targetTouches[0].pageY - startY;
            // 移动我们的盒子 盒子原来的位置 + 手指移动的距离
            this.style.left = x + moveX + 'px';
            this.style.top = y + moveY + 'px';
            e.preventDefault(); // 阻止屏幕滚动的默认行为
        });
    </script>

2. 移动端常见特效

`classList` 属性

classList 属性是HTML5新增的一个属性，返回元素的类名。但是IE10以上版本支持。该属性用于在元素中添加，移除及切换CSS类。有以下方法：

添加类

element.classList.add('类名');

移除类

element.classList.remove('类名');

切换类

element.classList.toggle('类名');

2.2 `click` 延时解决方案

移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放（double tap to zoom）页面。

解决方案：

禁止缩放。浏览器禁用默认的双击缩放行为并且去掉 300 ms 的点击延迟。
利用touch事件自己封装这个事件解决300ms延迟。

原理就是：（1）但我们手指触摸屏幕，记录当前触摸时间。（2）当我们手指离开屏幕，用离开的时间减去触摸的时间。（3）如果时间小于150ms，并且没有滑动过屏幕，那么我们就定义为点击。

【DOM BOM】笔记 7 日移动端网页特效1. 触屏事件2. 移动端常见特效4. 移动端常用开发框架5. 本地存储
使用插件。fastclick插件解决300ms延迟。

3.3 Swiper 插件使用

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

引入插件相关文件。
按照规定语法使用。

3.4 其他移动端常见插件

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

iscroll：http://github.com/cubiq/iscroll/。

3.5 插件的使用总结

【DOM BOM】笔记 7 日移动端网页特效1. 触屏事件2. 移动端常见特效4. 移动端常用开发框架5. 本地存储

移动端视频插件 zy.media.js

【DOM BOM】笔记 7 日移动端网页特效1. 触屏事件2. 移动端常见特效4. 移动端常用开发框架5. 本地存储

4. 移动端常用开发框架

4.1 框架概述

【DOM BOM】笔记 7 日移动端网页特效1. 触屏事件2. 移动端常见特效4. 移动端常用开发框架5. 本地存储

4.2 Bootstrap

【DOM BOM】笔记 7 日移动端网页特效1. 触屏事件2. 移动端常见特效4. 移动端常用开发框架5. 本地存储

5. 本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性的在本地存储大量的数据，HTML5规范提出了相关解决方案。

本地存储特性

数据存储在用户浏览器中。
设置、读取方便、甚至页面刷新不丢失数据。
容量较大，sessionStorage约5M、localStorage约20M。
只能存储字符串，可以将对象JSON.stringify()编码后存储。

window.sessionStorage

【DOM BOM】笔记 7 日移动端网页特效1. 触屏事件2. 移动端常见特效4. 移动端常用开发框架5. 本地存储

<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        console.log(localStorage.getItem('username'));

        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            // 当我们点击了之后，就可以把表单里面的值存储起来
            var val = ipt.value;
            sessionStorage.setItem('uname', val);
            sessionStorage.setItem('pwd', val);
        });
        get.addEventListener('click', function() {
            // 当我们点击了之后，就可以把表单里面的值获取过来
            console.log(sessionStorage.getItem('uname'));

        });
        remove.addEventListener('click', function() {
            // 
            sessionStorage.removeItem('uname');

        });
        del.addEventListener('click', function() {
            // 当我们点击了之后，清除所有的
            sessionStorage.clear();

        });
    </script>
</body>

window.localStorage

声明周期永久生效，除非手动删除，否则关闭页面也会存在。
可以多窗口（页面）共享（同一浏览器可以共享）。
以键值对的形式存储。

存储数据：localStorage.setItem(key, value);
获取数据：localStorage.getItem(key);
删除数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();

<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
        var ipt = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var del = document.querySelector('.del');
        set.addEventListener('click', function() {
            var val = ipt.value;
            localStorage.setItem('username', val);
        })
        get.addEventListener('click', function() {
            console.log(localStorage.getItem('username'));

        })
        remove.addEventListener('click', function() {
            localStorage.removeItem('username');

        })
        del.addEventListener('click', function() {
            localStorage.clear();

        })
    </script>
</body>

【DOM BOM】笔记 7 日移动端网页特效1. 触屏事件2. 移动端常见特效4. 移动端常用开发框架5. 本地存储

1. 触屏事件

1.1 触屏事件概述

1.2 `TouchEvent` 触摸事件对象

1.3 移动端拖动元素

2. 移动端常见特效

`classList` 属性

添加类

移除类

切换类

2.2 `click` 延时解决方案

3.3 Swiper 插件使用

3.4 其他移动端常见插件

3.5 插件的使用总结

移动端视频插件 zy.media.js

4. 移动端常用开发框架

4.1 框架概述

4.2 Bootstrap

5. 本地存储

本地存储特性

window.sessionStorage

window.localStorage

继续阅读

前端和后台是如何交互的？

怎样使用SpringMVC控制页面

Spring MVC 接收多个实体参数

CSS中伪类和伪元素的区别

Vue项目 - 单文件组件和Vue中的路由

左耳朵耗子：程序员如何拿到年薪60万的岗位？

没救了! 困扰程序员一辈子的5个魔咒, 改掉比登天还难！

[转]如何成长为一名全栈工程师全栈工程师

underscore模板功能的使用和学习

CSS之折叠菜单

web开发之前后端渲染

JavaScript的那些坑之事件代理事件代理事件阶段

ACS基本配置-权限等级管理

vue （vue2.0）使用总结(从大体结构总结)

父子组件间传值的实现父子组件间传值的实现

vue搭建过程及出现问题

【DOM BOM】笔记 7 日 移动端网页特效1. 触屏事件2. 移动端常见特效4. 移动端常用开发框架5. 本地存储

1. 触屏事件

1.1 触屏事件概述

1.2 TouchEvent 触摸事件对象

1.3 移动端拖动元素

2. 移动端常见特效

classList 属性

添加类

移除类

切换类

2.2 click 延时解决方案

3.3 Swiper 插件使用

3.4 其他移动端常见插件

3.5 插件的使用总结

移动端视频插件 zy.media.js

4. 移动端常用开发框架

4.1 框架概述

4.2 Bootstrap

5. 本地存储

本地存储特性

window.sessionStorage

window.localStorage

继续阅读

【DOM BOM】笔记 7 日移动端网页特效1. 触屏事件2. 移动端常见特效4. 移动端常用开发框架5. 本地存储

1.2 `TouchEvent` 触摸事件对象

`classList` 属性

2.2 `click` 延时解决方案