一、触屏事件
1.触屏事件概述
移动端浏览器兼容性比较好，我们不需要考虑以前js的兼容性问题，我们可以放心的使用原生js写书效果，但是移动端也有自己的独特的地方。比如：触屏事件（touch） Android和ios都有
touch对象代表是一个触摸点，触摸点可以是一根手指，也可以是一根触摸笔，触屏事件可以响应手指（触控笔）对屏幕或者触控操作
2.常见的触屏事件
| 触屏事件 | 说明 |
|---|---|
| touchstart | 手指触摸到一个DOM元素的时候触发 |
| touchmove | 手指在一个DOM元素上滑动的时候出发 |
| touchend | 手指从一个dom元素上移开的时候触发 |
3.触摸事件对象（touchEvent）
TouchEvent是一类描述手指在触摸平面（触摸屏、触摸板）的状态变化事件。这类事件用于描述一个或多个触点，使得开发者可以检车触点的移动，触点的增加或减少等等
| 触摸列表 | 说明 |
|---|---|
| touches | 正在触摸屏幕的所有手指的一个列表 |
| targetTouches | 正在触摸当前DOM元素上的手指的一个列表 |
| changedTouches | 手指状态发生了改变的列表，从无到有，从有到无的变化 |
因为平时我们都是给元素注册触摸事件，所以注意targetTouches
二、移动端常见特效
1.移动轮播图
移动端轮播图功能和pc基本一致
可以自动播放图片手指可以拖动播放轮播图window.addEventListener('load', function () { //alert(1); //1.获取元素 var focus = document.querySelector('.focus'); var ul = focus.children[0]; //这是第一个子元素 var ol = focus.children[1]; //第二个子元素 //获赠个div的宽度 var w = focus.offsetWidth; var index = 0; //图片的索引 //2.利用定时器自动轮播图片 var timer = setInterval(function(){ index++;//索引加1 var translateX = -index * w; //移动的距离 ul.style.transition = 'all .3s' //动画持续时间 ul.style.transform = 'translateX('+translateX+'px)'; //移动的距离 },2000); //等着我们过渡完成后，再去判断是否超过索引 // transitionend 事件在 CSS 完成过渡后触发。 ul.addEventListener('transitionend',function(){ if(index >= 3){ index = 0; //如果超过了最大索引回到0所以，就是第一张图片 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的类名选出来去掉类名，给当前的加上current ol.querySelector('.current').classList.remove('current'); //大家也可以用排他，全部干掉 //让当前的索引号的小li加上current ol.children[index].classList.add('current'); }); //4.手指滑动轮播图 //通过触摸元素（touchstart）：获取手指初始位置坐标 var startX = 0; var startY = 0; //添加手指触摸事件 ul.addEventListener('touchstart',function(e){ startX = e.targetTouches[0].pageX; //手指摸到轮播图，那么就该停止轮播(停止定时器) clearInterval(timer); }); var moveX = 0; //在手指离开后我们要用这个距离做计算 var flag = false;//如果用户手指移动过，我们再去判断是否要做判断效果 //移动手指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(); }); //手指离开，根据移动距离去判断是回弹还是播放上一张，下一张 ul.addEventListener('touchend',function(e){ if(flag){ //用户的手指拖动过轮播图 //(1)如果移动的距离大于50像素，我们就播放上一张或一张 if(Math.abs(moveX) > 50){ //如果用户是右滑播放的就是上一张，moveX是正值 if(moveX > 0){ index--; } else { //如果是左滑就播放下一张，moveX就是负值 index++; } var translateX = -index * w; //移动的距离 ul.style.transition = 'all .3s' //动画持续时间 ul.style.transform = 'translateX('+translateX+'px)'; //移动的距离 } else { //(2)如果移动的距离小于50像素我们就弹回去 var translateX = -index * w; //移动的距离 ul.style.transition = 'all .3s' //动画持续时间 ul.style.transform = 'translateX('+translateX+'px)'; //移动的距离 } } //手指离开的时候重新开启定时器 clearInterval(timer); timer = setInterval(function(){ index++;//索引加1 var translateX = -index * w; //移动的距离 ul.style.transition = 'all .3s' //动画持续时间 ul.style.transform = 'translateX('+translateX+'px)'; //移动的距离 },2000); });});2.返回顶部
//返回顶部模块var goBack = this.document.querySelector('.goBack');var nav = this.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.scrollTo(0,0);});3.classList属性
classList属性是HTML5新增的一个属性，返回元素的类名
该属性用于元素中添加、移除以及切换css类
3.1 添加类
//语法element.classList.add('类名');//如：focus.classList.add('current');3.2 移除类
//语法element.classList.remove('类名');//如：focus.classList.remove('current');3.3 切换类
//语法element.classList.toggle('类名');//如：focus.classList.toggle('current');<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02classList属性</title> <style> .bg{ background-color: black; } </style></head><body> <div class="one two three">123</div> <button>开关灯</button> <script> //classList返回的是元素的类名 var div = document.querySelector('div'); console.log(div.classList[1]); //1.添加类选择器 div.classList.add('abc'); //2.删除类名 div.classList.remove('one'); //3.切换类 var btn = document.querySelector('button'); btn.addEventListener('click',function(){ document.body.classList.toggle('bg'); }) </script></body></html>4.click延时解决方案
移动端click事件都会有300ms的延时。原因是移动端屏幕双击会缩放页面。
解决方案：
进制缩放，浏览器禁用默认双击缩放行为可以去掉300ms的点击延迟
<meta name="viewport" content="user-scalable=no">利用touch事件自己封装这个事件解决300ms延迟
原理： 当我们手指触摸屏幕，记录当前触摸事件当我们的手指离开屏幕，用离开的事件减去触摸的事件如果时间小于150ms，并且没有滑动过屏幕，那我们就定义为点击<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>03使用插件解决延迟300ms问题</title> <script src="fastclick.js"></script></head><body> <div>123</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(1111111); }); </script></body></html>三、移动端开发常用开发插件
1.什么是插件
移动端要求的是快速开发，所以我们经常借助一些插件来帮助我们完成操作。
JS插件就是js文件，它遵循一定规则编写，方便程序展示效果，拥有特定功能且方便调用，如：轮播图、瀑布流。
特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小
fastclick.js就属于一个插件
2.插件的使用
第一步：引入js文件按照规定的语法使用if('addEventListener' in document){ document.addEventListener('DOMContentLoaded',function(){ FastClick.attach(document.body); },false);}3.Swiper
官网：https://swiper.com.cn/
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>04swiper轮播图</title> <link rel="stylesheet" href="swiper/swiper-bundle.css"> <style> .swiper { width: 600px; height: 300px; } .swiper img{ width: 100%; height: 100%; } .swiper-slide{ width:300px;/*设为固定值*/ width:auto;/*根据内容调整宽度*/ } </style></head><body> <div class="swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="images/focus1.jpg" alt=""></div> <div class="swiper-slide"><img src="images/focus2.jpg" alt=""></div> <div class="swiper-slide"><img src="images/focus3.jpg" alt=""></div> <div class="swiper-slide"><img src="images/focus4.jpg" alt=""></div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div> </div> <script src="swiper/swiper-bundle.min.js"></script> <script> var mySwiper = new Swiper ('.swiper', { autoplay:{ //自动播放相关 delay: 1000, stopOnLastSlide: false }, //slidesPerView : 3, effect: 'coverflow', slidesPerView: 3, centeredSlides: true, //direction: 'vertical', // 垂直切换选项 loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 scrollbar: { el: '.swiper-scrollbar', }, }) </script></body></html>4.media
移动端视频框架
framework：框架。它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>05视频插件</title> <link rel="stylesheet" href="media/zy.media.min.css"> </head><body> <div class="playvideo"> <div class="zy_media"> <video poster="bx.png" data-config='{"mediaTitle": "《疯狂动物城》--腾讯视频"}'> <source src="media/mov.mp4" type="video/mp4"> 您的浏览器不支持HTML5视频 </video> </div> </div> <script src="media/zy.media.min.js"></script> <script> zymedia('video',{ autoplay:true, alwaysShowControls: false }); </script></body></html>四、本地存储
1.概念
随着互联网的快速发展，基于网页的应用越来越多，同时也变得复杂，为了满足各种各样的需求，会经常在本地存储大量的数据，HTML5规范提出了相应的解决方案
数据存储在用户的浏览器中设置、读取方便、甚至页面刷新都不丢失数据容量较大。sessionStroage约5M，localStorage约20M只能存储字符串，可以将对象JSON.stringif() 编码后存储2.sessionStorage
生命周期为关闭浏览器窗口在同一个窗口（页面）下数据可以共享以键值对的形式存储使用 （name:‘张三’）2.1 存储数据的语法
sessionStorage.setItem(key,value);2.2 获取数据的语法
sessionStorage.getItem(key);2.3 删除数据
sessionStorage.removeItem(key);2.4 清空所有数据
sessionStorage.clear()<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>06本地存储-sessionStorage</title></head><body> <input type="text"> <button class="set">存储数据</button> <button class="get">获取数据</button> <button class="remove">删除数据</button> <button class="removeAll">删除全部数据</button> <script> var input = document.querySelector('input'); var set = document.querySelector('.set'); var get = document.querySelector('.get'); var remove = document.querySelector('.remove'); var removeAll = document.querySelector('.removeAll'); //添加数据 set.addEventListener('click',function(){ //点击按钮后，将数据存储到sessionStorage中 var val = input.value; sessionStorage.setItem('username',val); }); //获取数据 get.addEventListener('click',function(){ //点击按钮后，将数据从sessionStorage中取出 var val = sessionStorage.getItem('username'); console.log('从sesisonStorage中取出的key是username的值：' + val); }); //删除数据 remove.addEventListener('click',function(){ //点击按钮后，将数据从sessionStorage中删除 sessionStorage.removeItem('username'); }); //删除全部数据 removeAll.addEventListener('click',function(){ //点击按钮后，将数据从sessionStorage中全部数据删除 sessionStorage.clear(); }); </script></body></html>3.localStorage
生命周期永久生效，除非手动删除，否则关闭页面也会存在可以多个窗口（页面）共享同一个数据（同一个浏览器的多个窗口可以共享数据）以键值对的形式存储数据3.1 存储数据
localStorage.setItem(key,value);3.2 获取数据
localStorage.getItem(key);3.3删除数据
localStorage.removeItem(key);//清空所有数据localStorage.clear();<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>07本地存储-localStorage</title></head><body> <div> 用户名：<input type="text" id="username"> <br/> 密码：<input type="text" id="pwd"> </div> <button class="set">存储数据</button> <button class="get">获取数据</button> <button class="remove">删除数据</button> <button class="removeAll">删除全部数据</button> <script> var username = document.querySelector('#username'); var password = document.querySelector('#pwd'); var set = document.querySelector('.set'); var get = document.querySelector('.get'); var remove = document.querySelector('.remove'); var removeAll = document.querySelector('.removeAll'); //添加数据 set.addEventListener('click',function(){ //点击按钮后，将数据存储到localStorage中 var name = username.value; var pwd = password.value; localStorage.setItem('username',name); localStorage.setItem('pwd',pwd); }); //获取数据 get.addEventListener('click',function(){ //点击按钮后，将数据从localStorage中取出 var name = localStorage.getItem('username'); console.log('从localStorage中取出的key是username的值：' + name); var pwd = localStorage.getItem('pwd'); console.log('从localStorage中取出的key是pwd的值：' + pwd); }); //删除数据 remove.addEventListener('click',function(){ //点击按钮后，将数据从localStorage中删除 localStorage.removeItem('pwd'); }); //删除全部数据 removeAll.addEventListener('click',function(){ //点击按钮后，将数据从localStorage中全部数据删除 localStorage.clear(); }); </script></body></html>