触屏事件
<div></div>
<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>touches 正在触摸屏幕的所有手指的列表
targetTouches 正在触摸当前DOM元素的手指列表
如果侦听的是一个DOM元素，他们两个是一样的
changedTouches 手指状态发生了改变的列表 从无到有 或者 从有到无
因为我们一般都是触摸元素 所以最经常使用的是 targetTouches
当我们手指离开屏幕的时候，就没有了 touches 和 targetTouches 列表，但是会有 changedTouches
targetTouches[0] 就可以得到正在触摸dom元素的第一个手指的相关信息 比如 手指的坐标等等
移动端拖动元素
原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离
手指移动的距离：手指滑动中的位置 减去 手指刚开始触摸的位置
拖动元素三步曲：
（1）触摸touchstart：获取手指初始坐标，同时获得盒子原来的位置
（2）移动手指touchmove：计算手指的滑动距离，并且移动盒子
（3）离开手指touchend：
注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动e.preventDefault();
<style>
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: slateblue;
}
</style>
</head>
<body>
<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>
</body>
移动端常见特效
移动端轮播图
classList属性
是HTML5新增的一个属性，返回元素的类名。该属性用于在元素中添加，移除及切换css类
<style>
.bg {
background-color: black;
}
</style>
</head>
<body>
<div class="one"></div>
<button>开关灯</button>
<script>
//classList返回元素的类名
var div = document.querySelector('div');
// console.log(div.classList[1]);
//1.添加类名 是在后面追加类名不会覆盖以前的类名 注意前面不需要加.
div.classList.add('three');
//2.删除类名
div.classList.remove('one');
//3.切换类
var btn = document.querySelector('button');
btn.addEventListener('click', function () {
document.body.classList.toggle('bg');
})
</script>
</body>click延时解决方案
移动端click事件会有300ms延时，原因是移动端屏幕双击会缩放（double tap to zoom） 页面
1.禁止缩放
2.利用touch事件自己封装这个事件解决300ms延时
原理就是：（1）当我们手指触摸屏幕，记录当前触摸时间
（2）当我们手指离开屏幕，用离开的时间减去触摸的时间
（3）如果时间小于150ms，并且没有滑动过屏幕，那么我们就定义为点击
3.使用插件。fastclick插件解决300ms延时
js插件是js文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件
特点：它一般是为了解决某个问题而专门存在，其功能单一，而且比较小
<script src="fastclick.js"></script>
</head>
<body>
<div></div>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function () {
FastClick.attach(document.body);
}, false);
}
var div = document.querySelector('div');
div.addEventListener('click', function () {
alert(11);
})
</script>
</body>移动端常用开发插件
轮播图有swiper插件（www.swiper.com.cn）
步骤：加载插件➡复制html➡复制css➡复制js
SuperSlide插件：常用于焦点图/幻灯片、Tab标签切换、图片滚动、无缝滚动等（网站）
touchslide插件：面向手机、平板等移动终端，功能和SuperSlide一样
移动端视频插件zy.media.js
H5给我们提供了video标签，但是浏览器的支持情况不同；不同的视频格式文件。我们可以通过source解决，但是外观样式，还有暂停、播放、全屏等功能我们只能自己写代码解决。
这个时候我们可以使用插件方式来制作。
<link rel="stylesheet" href="zy.media.min.css">
<script src="zy.media.min.js"></script>
<style>
#modelView {
background-color: #DDDDDD;
z-index: 0;
opacity: 0.7;
height: 100%;
width: 100%;
position: relative;
}
.playvideo {
padding-top: auto;
z-index: 9999;
position: relative;
width: 300px;
height: 200px;
}
.zy_media {
z-index: 999999999
}
</style>
</head>
<body>
<div class="playvideo">
<div class="zy_media">
<video data-config='{"mediaTitle": "测试视频--视频"}'>
<source src="mov.mp4" type="video/mp4">
您的浏览器不支持HTML5视频
</video>
</div>
<div id="modelView"> </div>
</div>
<script>
zymedia('video', {
autoplay: true
});
</script>
</body>移动端常用开发框架
框架：是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发
插件一般是为了解决某个问题而专门存在，其功能单一，而且比较小
前端常用的框架：Bootstrap、Vue、Angular、React等。既能开发PC端，也能开发移动端
前端常用的移动插件有swiper、superslide、iscroll等
框架：大而全，一套解决方案
插件：小而专一，某个功能的解决方案
Bootstrap框架（v3.bootcss.com）
用于开发响应式布局、移动设备优先的web项目
轮播图
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<style>
.focus {
width: 800px;
height: 300px;
background-color: pink;
margin: 100px auto;
}
.carousel,
.carousel img {
height: 300px !important;
width: 100%;
}
</style>
</head>
<body>
<div class="focus">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators 小圆点-->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides 轮播图片-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="upload/banner(1).dpg" alt="...">
<div class="carousel-caption">
这是我的图片1
</div>
</div>
<div class="item">
<img src="upload/banner1.dpg" alt="...">
<div class="carousel-caption">
这是我的图片2
</div>
</div>
<div class="item">
<img src="upload/banner2.dpg" alt="...">
<div class="carousel-caption">
这是我的图片3
</div>
</div>
</div>
<!-- Controls 左右箭头-->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script>
$('.carousel').carousel({
interval: 1000
})
</script>
</body>