1.0 移动端常见特效
1.1 案例:移动端轮播图
移动端轮播图功能和基本PC端一致。
可以自动播放图片手指可以拖动播放轮播图
案例分析很多:可以去看笔记
window.addEventListener('load', function() {// alert(1);// 1. 获取元素 var focus = document.querySelector('.focus');var ul = focus.children[0];// 获得focus 的宽度var w = focus.offsetWidth;var ol = focus.children[1];// 2. 利用定时器自动轮播图图片var index = 0;var timer = setInterval(function() {index++;var translatex = -index * w;ul.style.transition = 'all .3s'; // 等这个过渡完成了再去判断 所以下面加了一个监听ul.style.transform = 'translateX(' + translatex + 'px)';}, 2000);// 等着我们过渡完成之后,再去判断 监听过渡完成的事件 transitionend ul.addEventListener('transitionend', function() {// 无缝滚动if (index >= 3) {index = 0;// console.log(index);// 去掉过渡效果 这样让我们的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类名的选出来去掉类名 removeol.querySelector('.current').classList.remove('current');// 让当前索引号 的小li 加上 current addol.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(); // 阻止滚动屏幕的行为});// 手指离开 根据移动距离去判断是回弹还是播放上一张下一张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 .1s';ul.style.transform = 'translateX(' + translatex + 'px)';}}// 手指离开的时候就重新开启定时器clearInterval(timer);timer = setInterval(function() {index++;var translatex = -index * w;ul.style.transition = 'all .3s';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.1 classList 属性
classList属性是HTML5新增的一个属性,返回元素的类名。但是ie10以上版本支持。
该属性用于在元素中添加,移除及切换 CSS 类。有以下方法
返回元素类名:
element.classList[0] (返回第一个类名字,class可以设置多个类名)
添加类:
element.classList.add(‘current’);
移除类:
element.classList.remove(‘current’);
切换类:
element.classList.toggle(‘current’);
注意:以上方法里面,所有类名都不带点
// 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');})
2.2 click 延时解决方案以及fastclick插件
移动端 click 事件会有 300ms 的延时,原因是移动端屏幕双击会缩放(double tap to zoom) 页面。
解决方案:
禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟。
( <meta name=“viewport” content=“user-scalable=no” )
利用touch事件自己封装这个事件解决 300ms 延迟。
原理就是:
1.当我们手指触摸屏幕,记录当前触摸时间
2.当我们手指离开屏幕, 用离开的时间减去触摸的时间
3.如果时间小于150ms,并且没有滑动过屏幕, 那么我们就定义为点击
//封装tap,解决click 300ms 延时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) {// 如果手指触摸和离开时间小于150ms 算点击callback && callback(); // 执行回调函数}isMove = false; // 取反 重置startTime = 0;});}//调用 tap(div, function(){// 执行代码 });
使用插件。 fastclick 插件解决 300ms 延迟。
1. 引用JS文件, 2.复制这一套代码就行了 什么都不用改if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}, false);}var div = document.querySelector('div');div.addEventListener('click', function() {alert(11);})
3.0 移动端常用开发插件
JS 插件是 js 文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用。如轮播图和瀑布流插件。
**特点:**它一般是为了解决某个问题而专门存在,其功能单一,并且比较小。
我们以前写的animate.js 也算一个最简单的插件
fastclick 插件解决 300ms 延迟。 使用延时
GitHub官网地址: /ftlabs/fastclick
3.1 插件的使用
引入 js 插件文件。按照规定语法使用。fastclick 插件解决 300ms 延迟。 使用延时
GitHub官网地址: /ftlabs/fastclick
if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}, false);}
3.2 Swiper 插件的使用 (轮播图插件)
中文官网地址: /
引入插件相关文件。按照规定语法使用
3.3 其他移动端常见插件
superslide: /iscroll: /cubiq/iscroll3.4 插件的使用总结
确认插件实现的功能去官网查看使用说明下载插件打开demo实例文件,查看需要引入的相关文件,并且引入复制demo实例文件中的结构html,样式css以及js代码3.5 练习-移动端视频插件 zy.media.js
H5 给我们提供了 video 标签,但是浏览器的支持情况不同。不同的视频格式文件,我们可以通过source 解决。但是外观样式,还有暂停,播放,全屏等功能我们只能自己写代码解决。这个时候我们可以使用插件方式来制作。4.0 移动端常用开发框架
框架,顾名思义就是一套架构,它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身,使用者要按照框架所规定的某种规范进行开发。
插件一般是为了解决某个问题而专门存在,其功能单一,并且比较小。
前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能开发PC端,也能开发移动端
前端常用的移动端插件有 swiper、superslide、iscroll等。
框架: 大而全,一整套解决方案
插件: 小而专一,某个功能的解决方案
4.1 Bootstrap开发框架
Bootstrap 是一个简洁、直观、强悍的前端开发框架,它让 web 开发更迅速、简单。
它能开发PC端,也能开发移动端
Bootstrap JS插件使用步骤:
引入相关js 文件复制HTML 结构修改对应样式修改相应JS 参数
5.0 本地存储
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。
本地存储特性:
数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大,sessionStorage约5M、localStorage约20M只能存储字符串,可以将对象JSON.stringify()编码后存储
5.1 本地存储—window.sessionStorage
生命周期为关闭浏览器窗口在同一个窗口(页面)下数据可以共享以键值对的形式存储使用1.存储数据:sessionStorage.setItem(key, value)
2.获取数据:sessionStorage.getItem(key)
3.删除数据:sessionStorage.removeItem(key)
4.删除所有数据:sessionStorage.clear()
5.2 本地存储—window.sessionStorage
声明周期永久生效,除非手动删除 否则关闭页面也会存在可以多窗口(页面)共享(同一浏览器可以共享)以键值对的形式存储使用1.存储数据:localStorage.setItem(key, value)
2.获取数据:localStorage.getItem(key)
3.删除数据:localStorage.removeItem(key)
4.删除所有数据:localStorage.clear()
JavaScript WebAPI 系列七 移动端常见特效;classList属性;click延迟插件;Wwiper轮播图插件;视频插件;开发框架等 本地存储