移动端网页特效

1 概述

(1) 览器兼容性较好，我们不需要考虑以前JS的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有自己独特的地方。
(2) 比如触屏事件touch(也称触摸事件)，Android和IOS都有。
(3) touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。
(4) 触屏事件可响应用户手指(或角控笔)对屏幕或者触控板操作。

 

2 触屏事件

(1) 常见触屏事件

touchstart：手指触摸到一个DOM元素时触发。
touchmove：手指在一个DOM元素上滑动时触发。
touchend：手指从一个DOM元素上移开时触发。

(2) 使用

div.addEventListener('事件',function(){});

 

3 触屏事件对象

(1) 概述

TouchEvent是一类描述手指在触摸平面(触摸屏、角摸板等)的状态变化的事件。
这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。
touchstart、touchmove、touchend三个事件都会各自有事件对象。

(2) 常见触屏事件对象属性

<1> e.touches：正在触摸屏幕的所有手指的一个列表。
e.touches[index].pageX：手指所在屏幕的横坐标。
e.touches[index].pageY：手指所在屏幕的横坐标。
<2> e.targetTouches：正在触摸当前DOM元素上的手指的一个列表。
e.touches[index].pageX：手指所在屏幕的横坐标。
e.touches[index].pageY：手指所在屏幕的横坐标。
<3> e.changedTouches：手指状态发生了改变的列表，从无到有，从有到无变化。
e.touches[index].pageX：手指所在屏幕的横坐标。
e.touches[index].pageY：手指所在屏幕的横坐标。
//因为平时我们都是给元素注册触摸事件，所以重点记住targetTocuhes。

(3) 使用

div.addEventListener('事件',function(e){
  console.log(e.触屏事件对象[0]);
});

 

4 移动端拖动元素案例

(1) 核心思路

<1> 移动端拖动的原理：手指移动中，计算出手指移动的距离，然后用盒子原来的位置+手指移动的距离作为盒子的位置。
<2> touchstart、touchmove、touchend可以实现拖动元素。
<3> 手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置。
手指滑动中的位置：touchmove事件的事件对象中的 targetTouches[0]里面的pageX和pageY。
手指刚开始触摸的位置：touchstart事件的事件对象中的 targetTouches[0]里面的pageX和pageY。
<4> 盒子原来的位置：touchstart事件中的盒子的offsetleft和offsetTop属性。
<5> 拖动元素三步曲
触摸元素touchstart：获取手指初始坐标，同时获得盒子原来的位置。
移动手指touchmove：计算手指的滑动距离，并且移动盒子。
离开手指touchend
//注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();

(2) 代码实现

var div s 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;
	startX = 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(); //阻止屏幕滚动的默认行为
});

5 移动端插件使用总结

确认插件实现的功能。
去官网查看使用说明。
下载插件。
打开demo实例文件，查看需要引入的相关文件，并且引入。
复制demo实例文件中的结构html，样式cssU以及js代码。

 

6 移动端常用开发框架

(1) 概述

框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。
框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。
插件一般是为了解决某个问题而专门存在，其功能单一，并且比较小。
前端常用的框架有Bootstrap、Vue、Angular、React等。既能开发PC端，也能开发移动端，前端常用的移动端插件有Swiper、superslide、iscrol等。
框架：大而全，一整套解决方案。
插件：小而专一，某个功能的解决方案。

(2) Bootstrap

<1> 概述

Bootstrap是一个简洁、直观、强悍的前端开发框架，它让web开发更迅速、简单。它能开发PC端，也能开发移动端

<2> 使用步骤

引入相关js文件
复制HTML结构
修改对应样式
修改相应JS参数