触屏事件
移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。
触屏事件touch
touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控
笔）对屏幕或者触控板操作。
touchstart
手指触摸到一个DOM元素时触发
touchmove
手指在一个DOM元素上滑动时触发
touchend
手指从一个DOM元素上移开时触发
实例
<script>
var div = document.querySelector('div');
div.addEventListener('touchstart', function(){
console.log('我摸了你');
})
div.addEventListener('touchmove', function(){
console.log('我继续摸');
})
div.addEventListener('touchend', function(){
console.log('我走了');
})
</script>
|
触摸事件对象TouchEvent
TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等
touches
正在触摸屏幕的所有手指的一个列表
整个屏幕的手指状态
targetTouches
正在触摸当前DOM元素上的手指的一个列表
当前元素上的手指状态
changedTouches
手指状态发生了改变的列表, 从无到有, 从有到无
不会有touches和targetTouches的信息
会有手指离开的位置的信息
实例
div.addEventListener('touchstart', function(e){
console.log(e.targetTouches[0]);
})
|
可以获得很多关于这个手指的很多信息
clientX/Y
触摸点在可视区距离左上的坐标
pageX/Y
触摸点在整个页面的距离左上的坐标
screenX/Y
触摸点在整个屏幕的距离左上的坐标
target:div
触摸点点击的当前元素的名字
移动端拖动元素
说明
- touchstart、touchmove、touchend 可以实现拖动元素
- 但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的pageX 和 pageY
- 移动端拖动的原理： 手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离
- 手指移动的距离： 手指滑动中的位置 减去 手指刚开始触摸的位
拖动元素三部曲
（1） 触摸元素 touchstart： 获取手指初始坐标，同时获得盒子原来的位置
（2） 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子
（3） 离开手指 touchend:
注意
手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault
移动端常见特效
移动端轮播图
移动端轮播图功能和基本PC端一致。
- 可以自动播放图片
- 手指可以拖动播放轮播图
分析
① 自动播放功能
② 开启定时器
③ 移动端移动，可以使用translate 移动
④ 想要图片优雅的移动，请添加过渡效果
无缝滚动
② 注意，我们判断条件是要等到图片滚动完毕再去判断，就是过渡完成后判断
③ 此时需要添加检测过渡完成事件 transitionend
④ 判断条件： 如果索引号等于 3 说明走到最后一张图片，此时 索引号要复原为 0
⑤ 此时图片，去掉过渡效果，然后移动
⑥ 如果索引号小于0， 说明是倒着走， 索引号等于2
⑦ 此时图片，去掉过渡效果，然后移动
小圆点跟随图片滚动特效
介绍classList属性
classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。
该属性用于在元素中添加，移除及切换 CSS 类。有以下方
添加类
element.classList.add（’类名’）；
focus.classList.add(‘current’);
|
移除类：
element.classList.remove（’类名’）;
focus.classList.remove(‘current’);
|
切换类
element.classList.toggle（’类名’）；
|
小实例
.bg {
background-color: black;
}
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
document.body.classList.toggle('bg')
})
|
注意
注意以上方法里面，所有类名都不带点
区别
className 是覆盖以前的类名
classList.add( ) 是追加类名, 不会覆盖以前的类名
小圆点跟随变化效果
② 把ol里面li带有current类名的选出来去掉类名 remove
③ 让当前索引号 的小li 加上 current add
④ 但是，是等着过渡结束之后变化，所以这个写到 transitionend 事件里
代码
ol.querySelector('li.current').classList.remove('current');
ol.children[index].classList.add('current');
|
手指滑动轮播图
② 本质就是ul跟随手指移动，简单说就是移动端拖动元素
③ 触摸元素 touchstart： 获取手指初始坐标
④ 移动手指 touchmove： 计算手指的滑动距离，并且移动盒子
⑤ 离开手指 touchend: 根据滑动的距离分不同的情况
⑥ 如果移动距离小于 某个像素 就回弹原来位置
⑦ 如果移动距离大于某个像素就往下一张滑动。
⑧ 滑动也分为左滑动和右滑动 判断的标准是 移动距离正负 如果是负值就是左滑 反之右滑
⑨ 如果是左滑 就播放下一张 （index++）
⑩ 如果是右滑 就播放上一张 (index–)
返回顶部
要求
当页面滚动某个地方，就显示，否则隐藏
点击可以返回顶部
分析
① 滚动某个地方显示
② 事件： scroll 页面滚动事件
③ 如果被卷去的头部（window.pageYOffset ）大于某个数值
④ 点击， window.scroll(0,0) 返回顶部
代码
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);
})
|
click 延时解决方案
原因
移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。
解决问题
方法一
- 禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟。
<meta name="viewport" content="user-scalable=no">
|
方法二
- 利用touch事件自己封装这个事件解决 300ms 延迟。
原理
- 当我们手指触摸屏幕，记录当前触摸时间
- 当我们手指离开屏幕， 用离开的时间减去触摸的时间
- 如果时间小于150ms，并且没有滑动过屏幕， 那么我们就定义为点击动作
function tap (obj, callback) {
var isMove = false;
var startTime = 0;
obj.addEventListener('touchstart', function (e) {
startTime = Date.now();
});
obj.addEventListener('touchmove', function (e) {
isMove = true;
});
obj.addEventListener('touchend', function (e) {
if (!isMove && (Date.now() - startTime) < 150) {
callback && callback();
}
isMove = false;
startTime = 0;
});
}
tap(div, function(){
window.scroll(0,0);
}
|
方法三
- 使用插件。 fastclick 插件解决 300ms 延迟。
移动端常用开发插件
什么是插件
JS 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。
特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。
我们以前写的animate.js 也算一个最简单的插件
fastclick 插件解决 300ms 延迟。
GitHub官网地址： https://github.com/ftlabs/fastclick
使用插件
- 引入 js 插件文件。
- 按照规定语法使用。
Swiper轮播图插件的使用
中文官网地址： https://www.swiper.com.cn/
1. 引入插件相关文件。
把min.css与min.js文件放到自己的对应目录下面
在index.html中 通过链接引入
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>
<script src="js/index.js"></script>
|
2. 按照规定语法使用
选择swiper的选中样式html的源代码
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<div class="swiper-pagination"></div>
</div>
|
说明
- 放入原本轮播图的一个图片的位置 替换这个原本的图片
- 注意不要更改里面的结构和类名
- 换图片就是Slide 1 Slide2… 换成img标签
把源代码中css相关样式部分插入到我们css中slide附近
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
|
源代码中js部分 放入到我们自己写的index.js中
window.addEventListener('load', function(){
<!-- Initialize Swiper -->
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
});
})
|
自定义修改某些参数
修改小圆点的颜色
f12 点击小圆点 选到出现的类名
将类名复制到css 中 修改属性值
可能层级不够 属性值后面加入!important
其他移动端常见插件
superslide： http://www.superslide2.com/
iscroll： https://github.com/cubiq/iscr
插件的使用总结
- 确认插件实现的功能
- 去官网查看使用说明
- 打开demo实例文件，查看需要引入的相关文件，并且引入
- 复制demo实例文件中的结构html，样式css以及js代码
H5 给我们提供了 video 标签，但是浏览器的支持情况不同。
不同的视频格式文件，我们可以通过source 解决。
但是外观样式，还有暂停，播放，全屏等功能我们只能自己写代码解决。
这个时候我们可以使用插件方式来制作。
原生的写法: <video src="mov.mp4" controls></video>
步骤
将css和js文件放到我们自己的文件夹下
在index.html中引入插件文件.css和.js
注意引入顺序
<title>Document</title>
<link rel="stylesheet" href="zy.media.min.css">
<script src="zy.media.min.js"></script>
|
复制源代码中style
<script src="zy.media.min.js"></script>
<style type="text/css">
#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>
|
在body中引入相关html代码
<div class="playvideo">
<div class="zy_media">
<video data-config='{"mediaTitle": "测试视频--视频"}'>
<source src="你的视频路径.mp4" type="video/mp4">
您的浏览器不支持HTML5视频
</video>
</div>
<div id="modelView"> </div>
</div>
|
引入相关js代码
<script>
zymedia('video', {
autoplay: false
});
</script>
|
移动端常用开发框架
介绍
框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。
插件一般是为了解决某个问题而专门存在，其功能单一，并且比较小。
前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能开发PC端，也能开发移动端
前端常用的移动端插件有 swiper、superslide、iscroll等
框架与插件
框架： 大而全，一整套解决方案
插件： 小而专一，某个功能的解决方案
Bootstrap轮播图效果
Bootstrap 是一个简洁、直观、强悍的前端开发框架，它让 web 开发更迅速、简单。
它能开发PC端，也能开发移动端
Bootstrap JS插件使用步骤
1. 引入相关js 文件
下载bootstrap之后有css/fonts/js整个文件夹放入根目录
在index.html引入jquery文件
bootstrap.js
css文件
<title>Document</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
|
2. 复制HTML 结构
在 div.focus中加入
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<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>
|
这个代码可以在bootstrap : https://v3.bootcss.com/javascript/#carousel 找到
3. 修改对应样式
style里面
.carousel,img{
width: 100%;
height: 300px!important;
}
|
需修改图片的长度与宽度
4. 修改相应JS 参数
修改图片播放间隔 (写在/body上面 script里面)
$('.carousel').carousel({
interval: 2000
})
|
阿里百秀轮播图应用
文件引入
注意顺序
<!-- 引入bootstrap 样式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- 引入我们自己的首页样式文件 -->
<link rel="stylesheet" href="css/index.css">
<!-- 先引入jquery js文件 -->
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
|
第一个小li里面仿轮播图
把里面a全部扔掉 插入下面的代码
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<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>
|
根据第一个li 的父元素的高度与宽度 在对应的css后面加上自定义的bootstrap的样式
.news li:nth-child(1) {
width: 50%;
height: 266px;
}
.carousel,
.carousel img {
width: 100%;
height: 266px!important;
}
|
li的子代a 影响了bootstrap里面的a 所以
原本的.news li a 改为.new li >a
让我们自己写的a 只限定在自带选择器上 不深入到bootstrp的结构里面, 影响bootstrap里面的a
让我们自己写的a 只限定在自带选择器上 不深入到bootstrp的结构里面, 影响bootstrap里面的a
这里的> 是自带选择器的意思 只选择亲儿子 不选择孙子后代….
.news li>a {
position: relative;
display: block;
width: 100%;
height: 100%;
}
|
每个轮播图里面的标题的样式修改
.carousel-caption {
line-height: 41px;
font-size: 16px!important;
padding: 0!important;
}
.news li a p,
.carousel-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 41px;
padding: 5px 10px;
margin-bottom: 0;
background: rgba(0, 0, 0, .5);
font-size: 12px;
color: #fff;
}
|
在轮播图html代码后面加上js代码
调节滚动间隔事件
$('.carousel').carousel({
interval: 2000
})
|
---完结撒花---
