1. 触屏事件
1. 触屏事件概述
移动端兼容性较好，不需考虑JS的兼容问题，移动端有自己独特的地方，比如触屏事件touch（也称触摸事件），Android和iOS都有
touch对象代表一个触摸点，触屏事件可响应用户手指对屏幕或者触摸板的操作
常见触屏事件：
| 触屏touch事件 | 说明 |
|---|---|
| touchstart | 手指触摸到一个DOM元素是触发 |
| touchmove | 手指在一个DOM元素上滑动时触发 |
| youchend | 手指从一个DOM元素上移开时触发 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
//1. 获取元素
var div = document.querySelector('div');
//2. 手指触摸DOM元素事件
div.addEventListener('touchstart', function () {
console.log('我摸了');
});
//3. 手指在DOM上移动事件
div.addEventListener('touchmove', function () {
console.log('继续摸');
});
//4. 手指离开DOM元素事件
div.addEventListener('touchend', function () {
console.log('不摸了没意思');
});
</script>
</body>
</html>
2. 触摸事件对象（TouchEvent）
touchstart，touchmove，thouchend三个事件都有各自的事件对象
触摸事件对象重点三个对象列表：
| 触摸列表 | 说明 |
|---|---|
| touches | 正在触摸屏幕的所有手指的一个列表 |
| targetTouches | 正在触摸当前DOM元素上的手指的一个列表 |
| changedTouches | 手指状态发生了改变的列表，从无到有，从有到无变化 |
因为我们一般手势触摸元素 所以经常使用的是 targetTouches
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
//1. 获取元素
var div = document.querySelector('div');
div.addEventListener('touchstart', function (e) {
console.log(e);
//touches正在触摸屏幕的所有手指的列表
//targetTouches 正在触摸当前DOM元素的手指列表
//如果监听的是一个DOM元素，他俩一样
//changedTouches手指发生的改变的手指列表 从无到有 从有到无
//因为我们一般手势触摸元素 所以经常使用的是 targetTouches
console.log(e.targetTouches[0]);
//得到正在触摸DOM元素的第一个手指的相关信息
});
div.addEventListener('touchmove', function () {
});
div.addEventListener('touchend', function (e) {
console.log(e);
//当我们手指离开屏幕 就没有了touches 和targetTouches 列表
//但是会有 changedTouches
});
</script>
</body>
</html>
3. 移动端拖动元素
- touchstart，touchmove，touchend可以实现拖动元素
- 但是拖动元素需要当前手指的坐标值，可以使用targetTouches[0]里面的的pageX和PageY
- 移动端拖动原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置+手指移动的距离
- 手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置
拖动元素三部曲：- 触摸元素touchstart：获取手指初始坐标，同事获得盒子原来的位置
- 移动手指touchmove：计算手指的滑动距离，并且移动盒子
- 离开手指touchend
注意：手指移动也会触发滚动屏幕所以要阻值默认的屏幕滚动e.preventDefault();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<title>Document</title>
</head>
<body>
<div></div>
<script>
//1. 触摸元素 获取手指初始坐标，同时获取盒子原来的位置
//2. 移动手指 计算手指的滑动距离，并且移动盒子
//3. 离开手指
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>
</html>
2. 移动端常见特效
案例 移动端轮播图
移动端轮播图和PC基本保持一致
- 可以自动播放图片
- 手指可以拖动播放轮播图
案例分析
- 自动播放功能
- 开启定时器
- 移动端移动，可以使用translate移动
- 想要图片优雅的移动，可以添加过度动画
window.addEventListener('load', function () {
var focus = document.querySelector('.focus');
var ul = focus.children[0];
//过得focus宽度
var w = focus.offsetWidth;
//2. 利用定时器自动轮播图片
var index = 0;
var timer = setInterval(function () {
index++;
var translatex = -index * w;
//css3写法 加入动画
ul.style.transition = 'all .5s'
ul.style.transform = 'translateX(' + translatex + 'px)';
}, 2000);
})
案例分析自动播放
- 自动播放-无缝滚动
- 我们判断条件是要等到图片滚动万在去判断，就是过度万成后判断
- 此时需要添加检测过度完成事件 transitionend
- 此时图片，去掉过度效果，然后移动
- 如果索引号小于零，说明倒着走，索引号等于2
- 此时图片，去掉过度动画，然后移动
window.addEventListener('load', function () {
var focus = document.querySelector('.focus');
var ul = focus.children[0];
//过得focus宽度
var w = focus.offsetWidth;
//2. 利用定时器自动轮播图片
var index = 0;
var timer = setInterval(function () {
index++;
var translatex = -index * w;
//css3写法 加入动画
ul.style.transition = 'all .5s'
ul.style.transform = 'translateX(' + translatex + 'px)';
}, 2000);
//等我们过度完成之后再去判断，监听过度完成事件 transitionend
ul.addEventListener('transitionend', function () {
//无缝滚动
if (index == 3) {
index = 0;
//去掉过度效果 让我们的ul 快速的跳到目标位置
ul.style.transition = 'none'
// 利用最新的
var translatex = -index * w;
ul.style.transform = 'translateX(' + translatex + 'px)';
} else if (index < 0) {
index = 2;
ul.style.transition = 'none'
// 利用最新的
var translatex = -index * w;
ul.style.transform = 'translateX(' + translatex + 'px)';
}
})
})
classList
classList属性
HTML5新增属性，返回元素的类名，支持IE10以上版本
该属性用于在元素中添加、移除、切换css有以下方法
添加类
element.classList.add('类名')
移除类
element.classList.remove('类名')
切换类有类就去掉 没有就加上
element.classList.toggle('类名')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bg {
background-color: black;
}
</style>
</head>
<body>
<div class="one two"></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>
</html>
案例分析 小圆点跟随变化
- 小圆点跟随变化
- 把ol里li导游current类名选出来去掉类名remove
- 让当前索引号加上current
- 是等着过度结束之后，所以写到transitionend事件里
window.addEventListener('load', function () {
var focus = document.querySelector('.focus');
var ul = focus.children[0];
var ol = focus.children[1];
//过得focus宽度
var w = focus.offsetWidth;
//2. 利用定时器自动轮播图片
var index = 0;
var timer = setInterval(function () {
index++;
var translatex = -index * w;
//css3写法 加入动画
ul.style.transition = 'all .5s'
ul.style.transform = 'translateX(' + translatex + 'px)';
}, 2000);
//等我们过度完成之后再去判断，监听过度完成事件 transitionend
ul.addEventListener('transitionend', function () {
//无缝滚动
if (index >= 3) {
index = 0;
//去掉过度效果 让我们的ul 快速的跳到目标位置
ul.style.transition = 'none'
// 利用最新的
var translatex = -index * w;
ul.style.transform = 'translateX(' + translatex + 'px)';
} else if (index < 0) {
index = 2;
ul.style.transition = 'none'
// 利用最新的
var translatex = -index * w;
ul.style.transform = 'translateX(' + translatex + 'px)';
}
//3. 小圆点跟随变化
// 把ol里li导游current类名选出来去掉类名remove
ol.querySelector('.current').classList.remove('current');
// 让当前索引号加上current
ol.children[index].classList.add('current')
})
})
案例分析 手指拖动
- 手指滑动轮播图
- 本质就是ul根素手指移动，简单说就是移动端拖动元素
- 触摸元素 touchstart 获取手指初始坐标
- 移动手指touchmove 计算手指的滑动距离并且移动盒子
- 手指离开touchend 根据滑动距离分不同情况
- 如果移动距离小于某个像素，就回弹
- 大于某个值就上下切换图片
window.addEventListener('load', function () {
var focus = document.querySelector('.focus');
var ul = focus.children[0];
var ol = focus.children[1];
//过得focus宽度
var w = focus.offsetWidth;
//2. 利用定时器自动轮播图片
var index = 0;
var timer = setInterval(function () {
index++;
var translatex = -index * w;
//css3写法 加入动画
ul.style.transition = 'all .5s'
ul.style.transform = 'translateX(' + translatex + 'px)';
}, 2000);
//等我们过度完成之后再去判断，监听过度完成事件 transitionend
ul.addEventListener('transitionend', function () {
//无缝滚动
if (index >= 3) {
index = 0;
//去掉过度效果 让我们的ul 快速的跳到目标位置
ul.style.transition = 'none'
// 利用最新的
var translatex = -index * w;
ul.style.transform = 'translateX(' + translatex + 'px)';
} else if (index < 0) {
index = 2;
ul.style.transition = 'none'
// 利用最新的
var translatex = -index * w;
ul.style.transform = 'translateX(' + translatex + 'px)';
}
//3. 小圆点跟随变化
// 把ol里li导游current类名选出来去掉类名remove
ol.querySelector('.current').classList.remove('current');
// 让当前索引号加上current
ol.children[index].classList.add('current')
})
//4. 手指滑动轮播图
// 触摸元素 touchstart 获取手指初始坐标
var startX = 0;
var moveX = 0;
ul.addEventListener('touchstart', function (e) {
startX = e.targetTouches[0].pageX;
//手指触摸停止计时器
clearInterval(timer);
})
// 移动手指touchmove 计算手指的滑动距离并且移动盒子
ul.addEventListener('touchmove', function (e) {
//计算移动距离
moveX = e.targetTouches[0].pageX - startX;
//移动盒子：盒子原来的位置+手指移动的距离
var translatex = -index * w + moveX;
//手指拖动不需要动画 取消过度效果
ul.style.transition = 'none'
ul.style.transform = 'translateX(' + translatex + 'px)';
})
//手指离开 判断回弹 还是切换图片
//(1)如果移动距离大于50像素就播放下一张或者上一张
ul.addEventListener('touchend', function () {
if (Math.abs(moveX) > 50) {
//若果是右划播放上一张 moveX是正数
//若果是左划播放下一张 moveX是负数
if (moveX > 0) {
index--;
} else {
index++;
}
var translatex = -index * w;
ul.style.transition = 'all .5s'
ul.style.transform = 'translateX(' + translatex + 'px)';
} else {
//回弹
var translatex = -index * w;
ul.style.transition = 'all .5s'
ul.style.transform = 'translateX(' + translatex + 'px)';
}
})
})
案例 返回顶部
- 页面滚动到某个地方显示
- 事件 scroll页面滚动事件
window.addEventListener('load', function () {
var focus = document.querySelector('.focus');
var ul = focus.children[0];
var ol = focus.children[1];
//过得focus宽度
var w = focus.offsetWidth;
//2. 利用定时器自动轮播图片
var index = 0;
var timer = setInterval(function () {
index++;
var translatex = -index * w;
//css3写法 加入动画
ul.style.transition = 'all .5s'
ul.style.transform = 'translateX(' + translatex + 'px)';
}, 2000);
//等我们过度完成之后再去判断，监听过度完成事件 transitionend
ul.addEventListener('transitionend', function () {
//无缝滚动
if (index >= 3) {
index = 0;
//去掉过度效果 让我们的ul 快速的跳到目标位置
ul.style.transition = 'none'
// 利用最新的
var translatex = -index * w;
ul.style.transform = 'translateX(' + translatex + 'px)';
} else if (index < 0) {
index = 2;
ul.style.transition = 'none'
// 利用最新的
var translatex = -index * w;
ul.style.transform = 'translateX(' + translatex + 'px)';
}
//3. 小圆点跟随变化
// 把ol里li导游current类名选出来去掉类名remove
ol.querySelector('.current').classList.remove('current');
// 让当前索引号加上current
ol.children[index].classList.add('current')
})
//4. 手指滑动轮播图
// 触摸元素 touchstart 获取手指初始坐标
var startX = 0;
var moveX = 0;
var flag = false; //如果用户手指移动过再去判断
ul.addEventListener('touchstart', function (e) {
startX = e.targetTouches[0].pageX;
//手指触摸停止计时器
clearInterval(timer);
})
// 移动手指touchmove 计算手指的滑动距离并且移动盒子
ul.addEventListener('touchmove', function (e) {
//计算移动距离
moveX = e.targetTouches[0].pageX - startX;
//移动盒子：盒子原来的位置+手指移动的距离
var translatex = -index * w + moveX;
//手指拖动不需要动画 取消过度效果
ul.style.transition = 'none'
ul.style.transform = 'translateX(' + translatex + 'px)';
flag = true;
e.preventDefault();//阻值默认行为
})
//手指离开 判断回弹 还是切换图片
//(1)如果移动距离大于50像素就播放下一张或者上一张
ul.addEventListener('touchend', function () {
if (flag) {
if (Math.abs(moveX) > 50) {
//若果是右划播放上一张 moveX是正数
//若果是左划播放下一张 moveX是负数
if (moveX > 0) {
index--;
} else {
index++;
}
var translatex = -index * w;
ul.style.transition = 'all .5s'
ul.style.transform = 'translateX(' + translatex + 'px)';
} else {
//回弹
var translatex = -index * w;
ul.style.transition = 'all .5s'
ul.style.transform = 'translateX(' + translatex + 'px)';
}
flag = false;
}
//开启定时器
clearInterval(timer);
timer = setInterval(function () {
index++;
var translatex = -index * w;
//css3写法 加入动画
ul.style.transition = 'all .5s'
ul.style.transform = 'translateX(' + translatex + 'px)';
}, 2000);
})
//返回顶部模块
var goBack = document.querySelector('.goBack');
var nav = document.querySelector('.nav')
window.addEventListener('scroll', function () {
if (window.pageYOffset >= nav.offsetTop) {
goBack.style.display = 'block';
} else {
goBack.style.display = 'none';
}
})
//点击返回顶部
goBack.addEventListener('click', function () {
window.scroll(0, 0);
})
})
2. click演示解决方案
移动端click事件会有300ms的延时，原因是移动端屏幕双击会缩放页面
解决方案3种：
- 禁止缩放 ，浏览器禁用默认的啥UN光机所房型为并且去掉300ms的点击延时
<meta name="viewport" content="user-scalable=no"> - 利用touch事件自己封装事件解决300ms延时
原理：- 但我们手指触摸屏幕，记录当前触摸事件
- 当我们手指离开屏幕，用离开的时间减去触摸的时间
- 如果时间小于150ms，并且没有滑动过屏幕，那就定义为点击
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mfVWS3VF-1633613577542)(vx_images/1553314221046.png)]
- 使用插件。fastclick插件解决300ms延迟
3. 移动端常用开发插件
1. 什是插件
js插件就是js文件，它遵循了一定规范编写 ，方便程序展示，拥有特定功能方便调用。如轮播图和瀑布流插件
特点：他一般是为了某个问题二专门存在，其功能单一，并且比较小
我们以前写的animate.js也算一个最简单的插件
fastclick插件解决300ms延迟。使用延迟
GitHub官网地址：fastclick
2. 插件的使用
- 引入js插件文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./fastclick.js"></script>
<style>
div {
width: 50px;
height: 50px;
background-color: pink;
}
</style>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function () {
FastClick.attach(document.body);
}, false);
}
var div = document.querySelector('div');
div.addEventListener('click', function () {
alert(111)
})
</script>
</head>
<body>
<div></div>
</body>
</html>
3. Swiper插件的使用
中文官网地址：swiper官网
- 引入插件相关文件
- 按照规定使用语法
步骤：
1. 引入css文件
2. 引入js文件
3. HTML结构
4. css样式
5. 调用js
day10 07
4. 其他移动端常用插件
5. 插件的使用总结
- 确认插件实现的功能
- 去官网查看使用说明
- 下载插件
- 打开demo实例文件，查看需要引入的相关文件，并且引入
- 复制demo实例文件中的结构html，引入css以及js代码
6. 练习-移动端视频插件 zy.media.js
H5给我们提供了video标签，但是浏览器的支持情况不同
不同的视频格式文件，我们可以通过source解决
但是外观样式，还有暂停，播放，全屏等功能我们只能自己写代码解决
这个时候我们可以使用插件方式来制作
4. 移动端常用开发框架
1. 框架概述
前端常用框架：Bootstrap、Vue、Angular、React等
前端常用移动端插件有：swiper、superslide、iscroll等
框架：大而全，一整套解决方案
插件：小而专，某个功能的解决方案
2. Bootstrap
他是一个简介、直观、强悍的前端开发框架，他让web开发更迅速简单
能开发pc和移动
使用步骤
- 引入js文件
- 复制HTML结构
- 修改对应样式
- 修改相应JS参数
706
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
